前面我们登录是已经成功了的。现在我们就要来设计我们的主界面了，主界面其实也采用了border的布局方式。
北部：标题栏
南部：版权栏
西部：菜单栏
东部：内容栏
这儿难得地方应该就是菜单和内容栏部分了；
登录：
主界面布局：
主界面布局代码：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'iamge/s.gif';
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charsetutf-8";
//head部分
var head = new Ext.Panel({
region:'north',//北方即顶部
border:false,
html:'<div style="background:url(image/main1.gif) repeat-x; height:78px;"></div>',
height:80
});
//foot部分
var foot = new Ext.Panel({
region:'south',
html:'<div style="background:url(image/main2.gif) repeat-x;height:33px;">'
+'<div style="float:left;font:normal 12px 宋体;margin:10px 0 0 0px;">'
+'Power By:<span style="color:blue">杨静</span> </div>'
+'<div style="float:right;margin:10px;font:normal 12px 宋体;">'
+'版权所有：<a href="http://www/morik.com">http://write.blog.csdn.net/postlist</div>'
+'</div>',
height:35
});
//leftMenu部分
//临时代码
var leftmenu = new Ext.Panel({
region:'west',
html:'<div>导航菜单</div>',
width:200
});
//创建内容显示部分
//临时代码
var mainTab = new Ext.Panel( {
region : 'center',
html : '<div>主内容部分</div>'
});
//建立leftmenu和miantab两者之间的关系
leftmenu.on("nodeClick", function(nodeAttr) {
mainTab.loadTab(nodeAttr);
});
//创建布局
var viewport = new Ext.Viewport( {
layout : 'border',
style : 'border:#024459 2px solid;',
items : [head, foot, leftmenu, mainTab]
});
});
主界面的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>OA系统主页面</title> <!-- 引入Ext Js的样式文件 --> <link rel="stylesheet" type="text/css" href="extjs3.2.1/resources/css/ext-all.css"> <!-- 引入Ext Js的适配文件 --> <script type="text/javascript" src="extjs3.2.1/adapter/ext/ext-base.js"></script> <!-- 引入Ext Js的框架文件，该文件方便调试，在实际应用中直接引用ext-all.js文件 --> <script type="text/javascript" src="extjs3.2.1/ext-all-debug.js"></script> <!-- 引入相关的js文件 --> <!-- 左边菜单区域的js文件 --> <script type="text/javascript" src="js/LeftMenu.js"></script> <!-- 主界面的右边的内容区域的js --> <script type="text/javascript" src="js/MenuPanel.js"></script> <!-- 主框架布局的js --> <script type="text/javascript" src="js/Main.js"></script> </head> <body> <div id='deskTree' ></div> <div id='mainTree' ></div> <div id='sysTree' ></div> </body> </html>
现在窗体的框架基本都出来了现在我们就要向里面装东西了，
main.js代码如下：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'image/s.gif';
Ext.QuickTips.init();
Ext.lib.Ajax.defaultPostHeader += ";charsetutf-8";
//head部分
var head = new Ext.Panel({
region:'north',//北方即顶部
border:false,
html:'<div style="background:url(image/main1.gif) repeat-x; height:78px;"></div>',
height:80
});
//foot部分
var foot = new Ext.Panel({
region:'south',
html:'<div style="background:url(image/main2.gif) repeat-x;height:33px;">'
+'<div style="float:left;font:normal 12px 宋体;margin:10px 0 0 0px;">'
+'Power By:<span style="color:blue">杨静</span> </div>'
+'<div style="float:right;margin:10px;font:normal 12px 宋体;">'
+'版权所有：<a href="http://weibo.com/207286868">http://weibo.com/207286868</div>'
+'</div>',
height:35
});
//leftMenu部分
//临时代码
/*var leftmenu = new Ext.Panel({
region:'west',
html:'<div>导航菜单</div>',
width:200
});*/
var t1 = new Ext.tree.TreePanel({
//构建树组件
border:false,
rootVisible:false, //根节点不可视
root:new Ext.tree.AsyncTreeNode({//通过根节点来实现所有节点数据
text:'我的办公桌',//该内容在树组件中不可视
expanded:true,//起初展开根状态
//根节点的子节点数据
children:[{
id:"docRec",//text为节点显示的文本，leaf为叶子节点
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 Ext.Panel( {
region : 'center',
html : '<div>主内容部分</div>'
});*/
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(image/main.gif) no-repeat center middle; height:508px;"></div>'
}]
});
//建立leftmenu和miantab两者之间的关系
leftmenu.on("nodeClick", function(nodeAttr) {
mainTab.loadTab(nodeAttr);
});
//创建布局
var viewport = new Ext.Viewport( {
layout : 'border',
style : 'border:#024459 2px solid;',
items : [head, foot, leftmenu, mainTab]
});
});
在页面的左边是我们导航菜单，在Extjs中有种布局叫做accordion布局，这种布局专门用来处理我们现在遇到的这种情况。
LeftMenu.js代码示例如下：
Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.LeftMenu = function(config){
var d = Ext.apply({
split:true,//border布局中，中左区域和中右区域采用6px的分隔区域进行分隔
region:'west',//默认在主框架页面的左边
collapseMode :'mini',
width:200,//宽为200px
defaults : {
border : false
},
layoutConfig : {
animate : true
}
},config || {});//动画方式的accordion
//采用accordion布局来进行配置。这两个是导航菜单组件的核心，不能配置
config = Ext.apply(d, {
layout : 'accordion',
collapsible : true
});
//我们通过Function类的call方法来改变Panel类的作用域
//同时把配置项也传递给Panel类。继承Ext.Panel类中的构造函数功能
Morik.Office.LeftMenu.superclass.constructor.call(this, config);
//实现本类的功能
//遍历配置项trees集合
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, {
//LeftMenu类的方法
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事件来构建LeftMenu组件的nodeClick事件
'click':function(node,event){
//叶子节点，取消其默认事件处理
if (node && node.isLeaf()) {
event.stopEvent();
//执行注册nodeClick事件注册的回调函数
this.fireEvent('nodeClick', node.attributes);
}
},
scope : this
})
}
}
});
左边的导航单部分我们是做好了，通过main.js中建立leftmenu和miantab两者之间的关系，我们来处理右部的内容界面。
当用户单击左边导航菜单中的节点时，工作区域就会载入与该节点相对应的内容。
MainPanel.js代码如下：
Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.MainingPanel = Ext.extend(Ext.TabPanel, {
initComponent : function() {
//这里通过initComponent函数来初始化MainingPanel组件
//一些初始化工作
Morik.Office.MainingPanel.superclass.initComponent.call(this);
this._cache = {};
},
/*其他的方法*/
loadTab:function(node){
var n = this.getComponent(node.id);//根据节点id找到TabPanel中的子组件
if(n){
this.setActiveTab(n);//如果该node的id指定的子组件存在，就激活他
}else{
//把node的属性组成一个参数对象
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){
//采用指定的ns命名空间来构建，如果命名空间没有指定，采用默认命名空间
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;
}
});
最后的效果图：
