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 set
				width : 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);

	// 定义store
	var ds = new Ext.data.Store( {
		proxy : proxy,
		reader : reader
	});
this.ds=ds;
	// 第二，讲一下cm,grid

	var 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>'
					+ '<div	style="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>