Ext 主页布局

Ext 首页布局

//#########   LeftMenu   ##############//Ext.ns()构建命名空间，跟Java中的包概念一样,实际上会新建一个类，下面这条语句就新建了4个类Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");Morik.Office.LeftMenu = function(config) {var d = Ext.apply( {// default setwidth : 200,split : true,region : 'west',collapseMode :'mini',//在列的中间显示一个小三角defaults : {border : false},layoutConfig : {animate : true}}, config || {});config = Ext.apply(d, {layout : 'accordion',collapsible : true//在菜单面板的右侧显示可隐藏按钮});Morik.Office.LeftMenu.superclass.constructor.call(this, config);//改进，并为增加了个配置项tree!for(var i=0;i<this.trees.length;i++)  this.add({title:this.trees[i].getRootNode().text,items:[this.trees[i]]});// 事件处理this.addEvents('nodeClick');this.initTreeEvent();}Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {initTreeEvent : function() {if(!this.items) return;for (var i = 0;i < this.items.length; i++) {var p = this.items.itemAt(i);if (p)var t = p.items.itemAt(0);if(t)t.on( {'click' : function(node, event) {if (node && node.isLeaf()) {event.stopEvent();this.fireEvent('nodeClick', node.attributes);}},scope : this});}}})Morik.Office.CompanyPanel = function(config) {Morik.Office.CompanyPanel.superclass.constructor.call(this, config);// 加上服务器上的jsp数据生成// 生成Company类型var proxy = new Ext.data.HttpProxy( {url : 'company.jsp'});var recordType = new Ext.data.Record.create([ {name : "id",type : "int"}, {name : "comNum",type : "string"}, {name : "comName",type : "string"}, {name : "comAddress",type : "string"}]);// 定义分析器var reader = new Ext.data.JsonReader( {totalProperty : "results",root : "rows",id : "id"}, recordType);// 定义storevar ds = new Ext.data.Store( {proxy : proxy,reader : reader});this.ds=ds;// 第二，讲一下cm,gridvar cm = new Ext.grid.ColumnModel( {defaultSortable : true,defaultWidth : 180,columns : [ {header : '编号',dataIndex : 'comNum'}, {header : '名称',dataIndex : 'comName'}, {header : '公司地址',width : 300,dataIndex : 'comAddress'}]});var pagingBar = new Ext.PagingToolbar({        pageSize: 10,        store: ds,        displayInfo: true,        displayMsg: '共有 {2}，当前显示 {0} - {1}条',        emptyMsg: "没有数据"    });var grid = new Ext.grid.GridPanel( {cm : cm,store : ds,width : 660,height : 400,bbar:pagingBar,loadMask:{msg:'正在载入数据,请稍等...'},title : '公司列表'});//ds.load();this.add(grid);// 第三、调整，tbar分页,工具栏}Ext.extend(Morik.Office.CompanyPanel, Ext.Panel, {});Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");Morik.Office.MainingPanel = Ext.extend(Ext.TabPanel, {initComponent : function() {// 一些初始化工作Morik.Office.MainingPanel.superclass.initComponent.call(this);this._cache = {};},loadTab : function(node) {var n = this.getComponent(node.id);if (n) {this.setActiveTab(n);} else {var c = {'id' : node.id,'title' : node.text,closable : true};var pn = this.findPanel(node.id);n = this.add(pn ? new pn(c) : Ext.apply(c, {html : '你还没有实现该页面！'}))n.show().doLayout();}if (n.ds)n.ds.load({params:{start:0, limit:10}});},findPanel : function(name) {var ret = this._cache[name];if (!ret) {var pn = (this.ns ? this.ns : 'Morik.Office') + "."+ Ext.util.Format.capitalize(name) + 'Panel';var ret = eval(pn);}return ret;},addPanel : function(name, panel) {if (!this._cache)this._cache = {};this._cache[name] = panel;}});Ext.onReady(function() {Ext.BLANK_IMAGE_URL = 'pic/s.gif';Ext.QuickTips.init();Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";// 1、创建head部分var head = new Ext.Panel( {region : 'north',border : false,html : '<div style="background:url(pic/main1.gif) repeat-x; height:78px;"></div>',height : 80});// 2、创建foot部分var foot = new Ext.Panel( {region : 'south',html : '<div style="background:url(pic/main2.gif) repeat-x; height:33px; ">'+ '<div style="float:left;font:normal 12px tahoma, arial, sans-serif, 宋体;margin:10px 0 0 10px;">'+ 'Power By:<span style="color:blue">彭仁夔</span> &nbsp;</div>'+ '<divstyle="float:right;margin:10px;font:normal 12px tahoma, arial, sans-serif, 宋体;" >'+ '版权所有：<a href="http://www.morik.com">www.morik.com</a></div>'+ '</div>',height : 35});// 3、创建leftMenu部分// var leftmenu = new Ext.Panel( {// region : 'west',// html : '<div>导航菜单</div>',// width : 200// });// 4、创建主内容部分// var mainTab = new Ext.Panel( {// region : 'center',// html : '<div>主内容部分</div>'// });var t1 = new Ext.tree.TreePanel( {border : false,rootVisible : false,root : new Ext.tree.AsyncTreeNode( {text : "我的办公桌",expanded : true,children : [ {id : "docRec",text : "接收公文",leaf : true}, {id : "docSend",text : "发送公文",leaf : true}, {id : "docManage",text : "公文管理",leaf : true}]})});var t2 = new Ext.tree.TreePanel( {border : false,rootVisible : false,root : new Ext.tree.AsyncTreeNode( {text : "主数据管理",expanded : true,children : [ {id : "department",text : "部门管理",leaf : true}, {id : "company",text : "公司管理",leaf : true}, {id : "permissions",text : "权限管理",children : [ {id : "permission",text : "权限管理",leaf : true}, {id : "permissionType",text : "权限类别",leaf : true}]}]})});var leftmenu = new Morik.Office.LeftMenu( {title : '我的办公系统',//items : [ {//title : '我的办公桌',//items : [t1]//}, {//title : '主数据管理',//items : [t2]//}] trees : [t1, t2]});var mainTab = new Morik.Office.MainingPanel( {style : 'padding:0 6px 0 0',autoScroll : true,region : 'center',deferredRender : false,activeTab : 0,resizeTabs : true,inTabWidth : 100,tabWidth : 90,enableTabScroll : true,items : [{title : '我的首页',html : '<div style="background:url(pic/main.gif) no-repeat center middle; height:508px;"></div>'}]});// 5、建立leftmenu和mainTab两者之间的关系leftmenu.on("nodeClick", function(nodeAttr) {mainTab.loadTab(nodeAttr);});// 6、创建布局var viewport = new Ext.Viewport( {layout : 'border',style : 'border:#024459 2px solid;',items : [head, foot, leftmenu, mainTab]});});

?

?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>员工管理系统</title><link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="ext/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="ext/ext-all-debug.js"></script><script type="text/javascript" src="index.js"></script></head><body><div id='deskTree'></div><div id='mainTree' ></div><div id='sysTree' ></div></body></html>

?