//######### 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> </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>
?