ExtJs4.X之Viewport佈局

1、Viewport-border

 1     Ext.create('Ext.container.Viewport', {
 2                 layout: 'border',
 3                 items: [{
 4                     //split: true,
 5                     //collapsible:true,
 6                     region: 'north',
 7                     //html: '<h1>這是標題部分</h1>',//填充內容
 8                     contentEl:'top_div',//這是從頁面中取出ID爲top_div的標籤做爲內容
 9                     border: false,
10                     margins: '0 0 5 0'
11                 }, {
12                     region: 'west',
13                     collapsible: true,
14                     title: '左邊_West',
15                     width: 150,
16                     split:true
17                 }, {
18                     region: 'south',
19                     title: '底部_south',
20                     collapsible: true,
21                     contentEl:'bottom_div',
22                     //split: true,
23                     height: 100,
24                     minHeight: 100
25                 }, {
26                     region: 'east',
27                     title: '右邊_East',
28                     //collapsible: true,//是否可摺疊
29                     split: true,
30                     width: 150
31                 }, {
32                     region: 'center',
33                     xtype: 'tabpanel', 
34                     activeTab: 2,      // 配置默認顯示的激活面板,頁面加載的時候默認打開的頁面
35                     items: [{
36                         title: '首頁_default',
37                         html: '這裏是中間內容部分', //closable: true
38                     }, {
39                         title: '第一個頁面',
40                         html: '這裏是第一個頁面', closable: true
41                     }]
42                    
43                 }]
44             });

View Code

顯示頁面圖：

body部分的div爲：

<div id="top_div" style="margin-left:35%"><h1>這是標題部分</h1></div>
<div id="bottom_div" style="margin-left:35%;"><h2>Author：mimi信使</h2></div>

 屬性詳細：

 region:west、east、north、south、center；注意：center必須有，不然報錯

contentEl：從頁面中選擇id的標籤做爲內容填充

collapsible：是否可摺疊

split：是在collapsible爲true的基礎上纔有效果，在border中間增長摺疊箭頭（如左邊部分），

activeTab：爲頁面加載是默認顯示的第幾個tab

2、Viewport-Accordion

 1    var leftpanel = Ext.create("Ext.panel.Panel", {
 2                 title: "west",
 3                 layout: "accordion", 
 4                 width: 200,
 5                 minWidth: 100,
 6                 region: "west",
 7                 split: true,
 8                 collapsible: true,
 9                 items: [
10                             { title: "菜單管理", html: "菜單管理", iconCls: "icon_tag_green" },
11                             { title: "素材管理", html: "素材管理", iconCls: "icon_tag_green" },
12                             { title: "內容設置", html: "內容設置", iconCls: "icon_tag_green" },
13                 ]
14             });

View Code

而後再把leftpanel做爲對象替換原來的佈局爲border->items中region爲west的對象

顯示頁面圖：

3、給左菜單導航添加樹

 1  var store = Ext.create('Ext.data.TreeStore', {
 2                 root: {
 3                     expanded: true,
 4                     children: [{
 5                         text: "Ext基礎篇", expanded: true, children: [
 6                           {
 7                               text: "基本屬性1", children: [
 8                                 { text: "基本屬性1.1", leaf: true },
 9                                 { text: "基本屬性1.1", leaf: true }
10                               ]
11                           },
12                           { text: "基本屬性2", leaf: true },
13                           { text: "基本屬性3", leaf: true },
14                           { text: "基本屬性4", leaf: true }
15                         ]
16                     },
17                         {
18                             text: "Ext數據篇",  children: [
19                               { text: "Ext數據篇", leaf: true },
20                               { text: "Ext數據篇", leaf: true }
21                             ]
22                         },
23                         { text: "Ext其餘知識", leaf: true }
24                     ]
25                 }
26             });
27 
28             var lefttree = Ext.create('Ext.tree.Panel', {
29                 title: '菜單導航',
30                 width: 200,
31                 height: 150,
32                 store: store,
33                 rootVisible: false,
34                 iconCls: "icon_tag_green",
35                 useArrows: true,
36                 listeners: {
37                     itemclick: function (view, rec, item, index, e) {
38                         if (rec.get('text')) {
39                             Ext.Msg.alert("得到的內容","<font color='red'>標題內容爲：</font>"+rec.get('text'))
40                         }
41                     },
42                     beforeitemexpand: function () { Ext.Msg.alert("Title", "加載中...") },
43                     itemexpand: function () { Ext.Msg.alert("Msg","加載完成")}
44                 }
45             })

View Code

給leftpanel添加樹，把lefttree對象添加到leftpanel->items中

顯示頁面圖

屬性詳細(1)Ext.data.TreeStore數據組件expanded:true的時候嗎，菜單欄是打開着的（如菜單導航的」Ext基礎篇「），false的時候菜單欄是關閉着的（如Ext數據篇）（2）Ext.tree.PaneluseArrows：菜單欄是否顯示三角圖標，默認的時候爲」+「號圖標rootVisible:是否顯示跟節點菜單；若是爲true，次了；例子的根節點就會多出一個root的根節點listeners：監聽事件；itemclick單擊菜單欄時的事件（其中rec.get('text')中的get爲獲取store中屬性，返回其屬性的值）；           beforeitemexpand點擊張開三角圖標加載數據時候觸發的事件；itemexpand點擊三角圖標加載數據完成後觸發的事件