每次在毕业答辩会上，看到同专业的同学只要是XXX管理系统，就是下图所示的界面，看来这中布局还是很受欢迎的（偷笑）。接下来进入我们正题，在web项目无论是前端还是后台管理比较常见的布局就是Top-Left-Main。如图所示：
在平常的接触中，也见到了很多类似的前端框架，例如smartadmin，bootstrap-admin等，在今天我给大家介绍一种更加简洁的构建方式。
项目源码地址：https://github.com/zhangxy1035/extjs
参考资料：http://extjs-doc-cn.github.io/ext4api/#!/api
项目展示：
在该项目中界面界面的分类布局都是使用的extjs的panel完成的，主要代码如下：
1 //顶部
2 var topPanel = Ext.create(‘Ext.panel.Panel‘,{
3 region:‘north‘,///指定top方向
4 border:false,
5 height:80,
6 contentEl:‘top‘,//在网页中需要用id进行接收
7 margins:‘0 0 0 0‘
8 });
本身来讲大家所看到的left面板其实就是extjs中所提到的树，接下来，我们将具体谈谈如何生成这棵树。
官方代码如下：
1 var store = Ext.create(‘Ext.data.TreeStore‘, {
2 root: {
3 expanded: true,
4 children: [
5 { text: "detention", leaf: true },
6 { text: "homework", expanded: true, children: [
7 { text: "book report", leaf: true },
8 { text: "alegrbra", leaf: true}
9 ] },
10 { text: "buy lottery tickets", leaf: true }
11 ]
12 }
13 });
14
15 Ext.create(‘Ext.tree.Panel‘, {
16 title: ‘Simple Tree‘,
17 width: 200,
18 height: 150,
19 store: store,
20 rootVisible: false,
21 renderTo: Ext.getBody()
22 });
其实在上述代码中，主要就是创建了一个树的数据源，然后加载到面板中，在传递到页面中显示。
然而在本项目中，由于具体的需求，显示了一颗树上的两个叶子，并且为两个叶子的跳转增加了函数。具体代码如下：
1 Ext.onReady(function(){
2 //顶部
3 var topPanel = Ext.create(‘Ext.panel.Panel‘,{
4 region:‘north‘,///指定top方向
5 border:false,
6 height:80,
7 contentEl:‘top‘,//在网页中需要用id进行接收
8 margins:‘0 0 0 0‘
9 });
10
11 //中间
12 var centerPanel = Ext.create(‘Ext.tab.Panel‘,{
13 region:‘center‘,
14 contentEl:‘contentIframe‘,
15 id:‘mainContent‘,
16 items:[{title:‘首页‘}]
17 });
18
19 //创建模型
20 Ext.define(‘Menu‘, {
21 extend: ‘Ext.data.Model‘,
22 fields: [
23 {name: ‘text‘, type: ‘string‘},
24 {name: ‘url‘, type: ‘string‘}
25 ]
26 });
27
28 //创建数据(树的数据)
29 var info1 = {
30 text:‘信息1‘,
31 leaf:true,
32 url:‘../src/test1.html‘
33 };
34 var info2 = {
35 text:‘信息2‘,
36 leaf:true,
37 url:‘../src/test2.html‘
38 };
39
40 //创建数据源
41 var menuStore = Ext.create(‘Ext.data.TreeStore‘,{
42 model:‘Menu‘,
43 proxy:{
44 type:‘memory‘,
45 data:[info1,info2]
46 },
47 root:{
48 text:‘首页‘,
49 leaf:false,
50 expanded:true
51 }
52 });
53
54 //创建树菜单
55 var menuTree = Ext.create(‘Ext.tree.Panel‘,{
56 border:false,
57 store:menuStore,
58 hrefTarget:‘mainContent‘,
59 useArrows:false,
60 listeners:{
61 itemclick:function(view,rec,item,index,e){
62 if(rec.get(‘leaf‘)) {
63 changePage(rec.get(‘url‘),rec.get(‘text‘));
64 }
65 }
66 }
67 });
68
69 //切换内容
70 function changePage(url,title) {
71 var index = centerPanel.items.length;
72 //tab不超过2个
73 if(index==2) {
74 //索引从0开始
75 centerPanel.remove(1);
76 }
77 //动态添加tab
78 var tabPage = centerPanel.add({
79 title:title,
80 closable:true
81 });
82 //设置显示当前的tab
83 centerPanel.setActiveTab(tabPage);
84 Ext.getDom(‘contentIframe‘).src=url;
85 }
86
87 //
88
89 //左边
90 var westPanel = Ext.create(‘Ext.panel.Panel‘,{
91 region:‘west‘,
92 layout:‘accordion‘,
93 width:200,
94 title:‘菜单选项‘,
95 collapsible:true,
96 margins:‘0 5px 0 0‘,
97 items:[menuTree]
98 });
99
100 //通过viewport显示出来
101 Ext.create(‘Ext.container.Viewport‘,{
102 layout:‘border‘,
103 items:[topPanel,centerPanel,westPanel]
104 });
105
106
107 });
接下来在页面中进行引用：
1 <div id="top"> 2 <img src="../img/top.png" style="width: 1763px"/> 3 </div> 4 <iframe id="contentIframe" name="contentIframe" style="height:100%;width:100%" frameborder="0"></iframe>
关于叶子节点的页面就可以自己编写，至此项目构建完成，其中还有一些较为详细的点没有提出，例如需要引入extjs等。大家可以再https://github.com/zhangxy1035/extjs上看源码。然后构建自己的项目。
时间： 2024-12-11 10:13:04