标签：oa系统 extjs 前端框架 border 树状结构
之前说ExtJs是最适合做OA界面的前端框架，因为它把客户端界面搬来了网页，这东西可以说是，就是为那些各种各样的OA信息系统而生的。
一、基本目标
做出如下的OA界面，点击左边的项可以打开相应的标签页，点击标签页的关闭按钮可以关闭这个标签页，在下方的操作信息栏记录相应的操作。
树状结构可以折叠，可以调整。操作信息可以节点。
搞出这样的结构，就是从小的方面研究ExtJs的其它UI组件与Ajax系统，再配合php，aspx或者jsp等后端语言，就可以去OA系统开黑了，或者，一个不爽，标签页里面的系统直接通过iframe与ajax完事，也基本可以交差了。
二、制作过程
1、首先还是与《【ExtJs】ExtJs4.2.1的配置与Helloworld》（点击打开链接）一样，HTML里面没有任何东西，仅仅是引入ExtJs4的资源
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ViewPort</title>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
</head>
<body>
</body>
</html>2、首先创建一个container.Viewport，区分大小写的注意，充满整个窗口，自动随窗口的大小变化而变化。同时声明这个container.Viewport使用border布局，这个border布局与Java中的JFrame是一个样子。东南西北占小块，中间占大块。其中，里面的组件northItem,westItem,southItem,eastItem,centerItem再一个一个定义。Ext.getBody()就是添加到body节点的意思。
Ext.create('Ext.container.Viewport',{
layout:'border',
renderTo:Ext.getBody(),
items:[northItem,westItem,southItem,eastItem,centerItem]
});3、先是最简单的eastItem，里面什么都没有，但注意声明region:‘east‘表明这东西放在border布局的东边
var eastItem={
region:'east',
html:''
}; var northItem={
region:'north',//如果采用border布局，这个项一定要有
html:'<div style="background-color:#00aacc;color:#ffffff;font-size:30px;">某某OA系统</div>'
}; var centerItem={
region:'center',
id:'centerItem',
xtype:'tabpanel'
};6、southItem也没有什么东西的，主要是多了一个collapsible:true，可以折叠的属性，同时通过xtype:‘panel‘声明这是一个面板，也是声明一个id，一会儿这部分的内容将要被控制。 var southItem={
region:'south',
xtype:'panel',
id:'southItem',
title:'操作信息',
collapsible:true//可以折叠
};7、精华落在westItem这里。先是声明一个树状结构、树状图。树状结构的内容看起来多，其实很简单，很有规律的。
之后通过xtype:‘treepanel‘声明westItem是一个树状结构，通过store:store放上去。
ExtJs标签页在《【ExtJs】tabPanel标签页与修改标签页的内容》（点击打开链接）已经说过了。这里的标签只是多了两个监听器，表示其被激活与被关闭的处理动作而已。
//树状图
var store=Ext.create('Ext.data.TreeStore',{
root:{//树状图有且只有一个树根
expanded:true,//这树状图是可以打开叶子的
children:[
{
text:'大项目1',
expanded:true,
children:[
{
id:1,//为下面的监听事件所使用，且ID为1
text:'项目1',
leaf:true//表明这里是叶子，不再向下延伸，同时为下面的监听器所操作
},
{
id:2,
text:'项目2',
leaf:true
},
{
id:3,
text:'项目3',
leaf:true
}
]
},
{
text:'大项目2',
expanded:true,
children:[
{
id:4,
text:'项目4',
leaf:true
},
{
id:5,
text:'项目5',
leaf:true
}
]
}
]
}
});
var westItem={
region:'west',
xtype:'treepanel',
store:store,//添加树状图
width:100,//这里一定要设置好宽度，否则不显示
rootVisible:false,//不显示树根
split:true,//可以自己调整其大小
collapsible:true,//可以折叠
listeners:{
//如果项被点击的话
itemclick:function(view,record,item){
//如果是叶子，对应上面的leaf==true
if(record.data.leaf){
//如果没有与当前点击项目id相同的的标签页的话
if(!Ext.getCmp(record.data.id)){
//则新建一个与当前点击项目id相同的的标签页
Ext.getCmp("centerItem").add({
id:record.data.id,
title:record.data.text,
html:Ext.util.Format.date(new Date(),'H时i分s秒')+"",
listeners:{
//为这个标签页的关闭增加监听事件
removed:function(){
//在状态栏中删除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'关闭了：'+record.data.text+"！"});
},
activate:function(){
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
}},
closable:true//允许关闭，同时新建关闭按钮
});
}
//有没有这个标签页都激活这个标签页
Ext.getCmp("centerItem").setActiveTab(record.data.id);
//然后在状态栏中删除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
}
}
}
};
三、总结
于是，整个网页的代码如下图，也是仅仅130行而已！
注意所有Ext代码必须写在Ext.onReady(function(){});之中就可以了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ViewPort</title>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
</head>
<body>
</body>
</html>
<script>
Ext.onReady(function(){
var northItem={
region:'north',//如果采用border布局，这个项一定要有
html:'<div style="background-color:#00aacc;color:#ffffff;font-size:30px;">某某OA系统</div>'
};
//树状图
var store=Ext.create('Ext.data.TreeStore',{
root:{//树状图有且只有一个树根
expanded:true,//这树状图是可以打开叶子的
children:[
{
text:'大项目1',
expanded:true,
children:[
{
id:1,//为下面的监听事件所使用，且ID为1
text:'项目1',
leaf:true//表明这里是叶子，不再向下延伸，同时为下面的监听器所操作
},
{
id:2,
text:'项目2',
leaf:true
},
{
id:3,
text:'项目3',
leaf:true
}
]
},
{
text:'大项目2',
expanded:true,
children:[
{
id:4,
text:'项目4',
leaf:true
},
{
id:5,
text:'项目5',
leaf:true
}
]
}
]
}
});
var westItem={
region:'west',
xtype:'treepanel',
store:store,//添加树状图
width:100,//这里一定要设置好宽度，否则不显示
rootVisible:false,//不显示树根
split:true,//可以自己调整其大小
collapsible:true,//可以折叠
listeners:{
//如果项被点击的话
itemclick:function(view,record,item){
//如果是叶子，对应上面的leaf==true
if(record.data.leaf){
//如果没有与当前点击项目id相同的的标签页的话
if(!Ext.getCmp(record.data.id)){
//则新建一个与当前点击项目id相同的的标签页
Ext.getCmp("centerItem").add({
id:record.data.id,
title:record.data.text,
html:Ext.util.Format.date(new Date(),'H时i分s秒')+"",
listeners:{
//为这个标签页的关闭增加监听事件
removed:function(){
//在状态栏中删除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'关闭了：'+record.data.text+"！"});
},
activate:function(){
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
}},
closable:true//允许关闭，同时新建关闭按钮
});
}
//有没有这个标签页都激活这个标签页
Ext.getCmp("centerItem").setActiveTab(record.data.id);
//然后在状态栏中删除原有的信息，添加新的操作信息
Ext.getCmp("southItem").removeAll();
Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
}
}
}
};
var southItem={
region:'south',
xtype:'panel',
id:'southItem',
title:'操作信息',
collapsible:true//可以折叠
};
var eastItem={
region:'east',
html:''
};
var centerItem={
region:'center',
id:'centerItem',
xtype:'tabpanel'
};
Ext.create('Ext.container.Viewport',{
layout:'border',
renderTo:Ext.getBody(),
items:[northItem,westItem,southItem,eastItem,centerItem]
});
});
</script>【ExtJs】利用树状结构、Border布局与标签页刻划OA界面
标签：oa系统 extjs 前端框架 border 树状结构
原文地址：http://blog.csdn.net/yongh701/article/details/45243871
