Ext JS基礎（面板佈局viewport）

  1 Ext.onReady(function () {
  2     //建立一個TreeStore,TreeStore負責爲Tree提供數據
  3     var store = Ext.create('Ext.data.TreeStore',
  4         {
  5             root:{
  6                 expanded:true,
  7                 children:[
  8                     {text:"古典",expanded:true,children:
  9                         [
 10                             {id:1,text:"西遊記",leaf:true},
 11                             {id:2,text:"三國演義",leaf:true},
 12                             {id:3,text:"水滸傳",leaf:true},
 13                             {id:4,text:"紅樓夢",leaf:true},
 14                             {id:5,text:"封神演義",leaf:true},
 15                             {id:6,text:"搜神記",leaf:true}
 16                         ]
 17                     },
 18                     {
 19                         text:"言情",expanded:true,children:
 20                         [
 21                             {id:7,text:"相思樹",leaf:true},
 22                             {id:8,text:"相愛十年",leaf:true}
 23                         ]
 24                     }
 25                 ]
 26             }
 27         });
 28 
 29     //建立一個佈局容器，存放上面這棵樹
 30     Ext.create('Ext.container.Viewport',
 31         {
 32             layout:'border',
 33             items:[
 34                 //上面區域的內容
 35                 {
 36                     region:'north',
 37                     html:'<div style="width:900px"><a href="www.cctv.com"></div>'
 38                 },
 39                 //左邊放一顆樹
 40                 {
 41                     region:'west',
 42                     xtype:'treepanel',//這是Ext.tree.Panel
 43                     title:'珍藏圖書',
 44                     listeners:{
 45                         //爲itemclick事件添加監聽器
 46                         itemclick:function (view,record,item)
 47                         {
 48                             //若是是葉子節點
 49                             if (record.data.leaf){
 50                                 //獲取頁面中my_center組件，該組件時Ext.tab.Panel組件
 51                                 var tabPanel = Ext.getCmp('my_center');//在下面的'my_center已經定義了，決定這是一個tab容器'
 52                                 //若是頁面上沒有該圖書id對應的組件
 53                                 if (!Ext.getCmp(record.data.id)){
 54                                     //向Ext.tab.Panel組件中插入一個新的Tab頁面
 55                                     var tab = tabPanel.add(
 56                                         {
 57                                             //設置新Tab頁面的屬性
 58                                             id:record.data.id,
 59                                             title:record.data.text,
 60                                             html:record.data.text,
 61                                             closable:true
 62                                         }
 63                                     );
 64                                 }
 65 
 66                                 //查詢正在激活的圖書
 67                                 tabPanel.setActiveTab(record.data.id);
 68                                 //向下區域的Ext.panel.Panel組件中插入內容
 69                                 Ext.getCmp('info').add({html:'正在操做《'+record.data.text+'》圖書！'});
 70                             }
 71 
 72                         }
 73                     },
 74 
 75                     width:200,
 76                     store:store,
 77                     rootVisible:false
 78                 },
 79                 //下面區域的內容，使用一個普通Ext.panel.Panel
 80                 //沒有指定xtype，默認是Ext.panel.Panel
 81                 {
 82                     id:'info',
 83                     region:'south',
 84                     title:'操做信息',
 85                     collapsible:true,
 86                     split:true,
 87                     height:100,
 88                     minHeight:100
 89                 },
 90 
 91                 //右邊區域的內容，使用一個普通的Ext.panel.Panel
 92                 {
 93                     region:'east',
 94                     title:'右邊欄',
 95                     collapsible:true,
 96                     split:true,
 97                     width:150
 98                 },
 99 
100                 //中間面板的內容：使用Ext.tab.Panel
101                 {
102                     region:'center',
103                     id:'my_center',
104                     xtype:'tabpanel',
105                     activeTab:0,
106                     items:{
107                         title:'首頁',
108                         html:'學習Ext.container.Viewport的例子'
109                     }
110                 }]
111         });
112 });

效果：