使用Extjs組件實現Top-Left-Main布局並且增加事件響應

標籤：

　　每次在畢業答辯會上，看到同專業的同學只要是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 });

View Code

　　接下來在頁面中進行引用：

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上看源碼。然後構建自己的項目。

使用Extjs組件實現Top-Left-Main布局並且增加事件響應