第五章 Extjs如何实现“T”型系统首页布局 (入门教程)

第五章 Extjs如何实现“T”型系统首页布局 (入门教程)

 

看这章前，您有必要去看一下  EXT borderLayout图解（初学有用)  这遍文章。因为实现这种传统的应用系统布局，我们用了Extjs的borderLayout。系统截图如下：

      T型首页布局图：

             

代码如下：

  Js代码  

1. var WebApp = {};  
2. WebApp.Desktop = function(){  
3.     this.Banner = new Ext.Panel({  
4.         region : "north",  
5.         margins: '0 0 2 0',      
6.         contentEl : "header",             
7.         height : 62,  
8.         bbar : this.createTopMenu()  
9.     });   
10.     this.WestMenu = new Ext.Panel({  
11.         region : "west",  
12.         margins: '0 5 0 0',  
13.         layout:'accordion',  
14.         width : 200,  
15.         items : [{  
16.             title : "客户管理"  
17.         },{  
18.             title : "报表管理"  
19.         },{  
20.             title : "退货管理"  
21.         }]  
22.     });   
23.     this.MainPanel = new Ext.TabPanel({  
24.         region : "center",  
25.         activeTab: 0,  
26.         items: [{  
27.             title : '信息区',  
28.             frame : true  
29.         }]  
30.     });           
31.       
32.     WebApp.Desktop.superclass.constructor.call(this, {  
33.         layout : "border",  
34.         items : [this.Banner, this.WestMenu, this.MainPanel]  
35.     });           
36. }  
37. Ext.extend(WebApp.Desktop, Ext.Viewport, {  
38.     createTopMenu : function(){  
39.         return ['->',{  
40.             xtype : "tbitem",  
41.             autoEl : {  
42.                 tag: 'img',  
43.                 src: 'common/css/images/user_green.gif'                       
44.             }  
45.         },{  
46.             xtype : "tbtext",  
47.             text : "用户名：czp"  
48.         },'-',{  
49.             xtype : "tbitem",  
50.             autoEl : {  
51.                 tag: 'img',  
52.                 src: 'common/css/images/user_green.gif'                       
53.             }  
54.         },{  
55.             xtype : "tbtext",  
56.             text : "部门：研发部"  
57.         }]  
58.     }  
59. });  

 

创建实例：

Js代码  

1. Ext.onReady(function(){  
2.     new WebApp.Desktop();  
3. });  

 

这里无非用到了Extjs 的 border布局罢了。