ExtJS佈局控件

Layout Controls

Auto Layout 

Ext JS4中的容器的默認佈局是自動佈局。這個佈局管理器會自動地將組件放在一個容器中。

Fit Layout 

Fit佈局安排了容器的內容徹底佔據空間，它適合於容器的大小。Fit佈局一般用於具備單個項目的容器。Fit佈局是Card佈局的基類

 1 Ext.onReady(function() {
 2     Ext.create("Ext.panel.Panel", {
 3         layout: "fit",　　//fit佈局
 4         title : "Fit layout panel",
 5         height: 400,
 6         width: 600,
 7         renderTo: "panel",
 8         items: [{
 9             xtype: "textfield",
10             fieldLabel: "Email"    
11         }]
12     });
13 });

Anchor Layout

anchor佈局管理器將一個容器的項目與容器的大小相比較。當容器被調整時，anchor佈局管理器會從新安排相對於容器的新大小的項目。您能夠將anchor屬性配置爲子項。

您能夠在 anchor屬性中配置寬度和高度值以及 anchor屬性中的偏移值，以下所示。

1 anchor : "width% height%"
2 (or)
3 anchor : "offsetWidth offsetHeight"

您還能夠經過指定偏移值和百分比來混合這兩個選項。這裏有一個簡單的面板，它有一個文本框和一個按鈕，並配置了一個anchor佈局。項目配置了anchor屬性。當你點擊這個按鈕時，面板的寬度和高度會增長5px。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         layout: "anchor",
 4         title : "Anchor layout panel",
 5         width: 600,
 6         height: 400,
 7         items: [{
 8             xtype: "textfield",
 9             fieldLabel: "Name",
10             anchor: "95% 15%"
11         }, {
12             xtype: "button",
13             text: "Resize",
14             anchor: "-50, 15%",
15             listeners: {
16                 "click": function() {
17                     panel.setWidth(panel.getWidth() + 5);
18                     panel.setHeight(panel.getHeight() + 5);
19                 }
20             }
21         }],
22         renderTo: "panel"
23     });
24 });

另外一個例子

 1 Ext.onReady(function() {
 2     var panel1 = new Ext.Panel({
 3         title : "Panel1",
 4         height : 100,
 5         anchor : '-50',
 6         html : "高度等於100，寬度=容器寬度-50"
 7     });
 8     var panel2 = new Ext.Panel({
 9          title: "Panel2",
10          height: 100,
11          anchor: '50%',   
12          html: "高度等於100,寬度=容器寬度的50%"   
13     });      
14     var panel3 = new Ext.Panel({   
15         title: "Panel3",   
16         anchor: '-10, -250',   
17         html: "寬度=容器寬度-10,高度=容器高度-250"   
18     });       
19     var win = new Ext.Window({   
20         title: "Anchor Layout",   
21         height: 400, 
22         width: 400,   
23         layout: 'anchor',   
24         items: [panel1, panel2, panel3]               
25     });   
26     win.show();
27 });

Box Layout

Ext.layout.container.Box是VBox和HBox佈局的基礎類。VBox和HBox分別表明垂直盒和水平盒。

下面顯示一個帶有三個按鈕(A、B和C)的面板。這些按鈕是垂直排列在面板的中心

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "VBox layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "vbox",
 8             pack : "center",    //水平居中
 9             align : "center"    //垂直居中
10         },
11         defaults : {
12             xtype : "button",
13             margin: "10"
14         },
15         items: [
16             {text : "A"},
17             {text : "B"},
18             {text : "C"}
19         ],
20         renderTo: "panel"
21     });
22 });

代碼能夠修改成使用hbox佈局。能夠修改佈局配置，以下所示。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "VBox layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "hbox",
 8             pack : "center",
 9             align : "middle"
10         },
11         defaults : {
12             xtype : "button",
13             margin: "10"
14         },
15         items: [
16             {text : "A"},
17             {text : "B"},
18             {text : "C"}
19         ],
20         renderTo: "panel"
21     });
22 });

Accordion Layout

Accordion佈局是VBox佈局的擴展。它能夠垂直地排列一組面板，以摺疊和可擴展的特性。下面顯示了使用Accordion佈局的面板的代碼片斷。

 1 Ext.onReady(function() {
 2     var panel = new Ext.panel.Panel({
 3         renderTo : 'panel',
 4         title : '容器組件',
 5         layout : 'accordion',
 6         width : 600,
 7         height : 400,
 8         items : [{
 9                     title : '元素1',
10                     html : '元素1'
11                 }, {
12                     title : '元素2',
13                     html : '元素2'
14                 }, {
15                     title : '元素3',
16                     html : '元素3'
17                 }, {
18                     title : '元素4',
19                     html : '元素4'
20                 }]
21     });
22 });

Table Layout

 表格佈局用於呈現HTML表格元素。它具備一個表的全部屬性，最經常使用的是列屬性。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "Table layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "table",
 8             columns: 2
 9         },
10         defaults : {
11             xtype : "button",
12             margin: "10"
13         },
14         items: [
15             {text : "A"},
16             {text : "B"},
17             {text : "C"},
18             {text : "D"},
19             {text : "E"},
20             {text : "F"}
21         ],
22         renderTo: "panel"
23     });
24 });

另外一個例子

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "Table layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "table",
 8             columns: 3
 9         },
10         items : [{
11             title : "子元素1",
12             html : "這是子元素1中的內容",
13             rowspan : 2,
14             height: 108
15         }, {
16             title : "子元素2",
17             html : "這是子元素2中的內容",
18             colspan : 2,
19             width: 400
20         }, {
21             title : "子元素3",
22             html : "這是子元素3中的內容"
23         }, {
24             title : "子元素4",
25             html : "這是子元素4中的內容"
26         }],
27         renderTo: "panel"
28     });
29 });

Column Layout

 列布局將容器安排在從左到右的獨立列中。在容器中使用列布局的每一個條目都配置了一個columnWidth屬性。全部項的列寬度屬性的值之和必須等於容器的總寬度。

您能夠按百分比或具體值提供列寬的值。百分比值做爲一個十進制數，其中總列的寬度等於1。

 1 Ext.onReady(function() {
 2     new Ext.Panel({
 3         renderTo : document.body,
 4         layout : "column",
 5         width : 500,
 6         height : 400,
 7         items : [{
 8             title : "列1",
 9             width : 200
10         }, {
11             title : "列2",
12             columnWidth : .3
13         }, {
14             title : "列3",
15             columnWidth : .3
16         }, {
17             title : "列4",
18             columnWidth : .4
19         }]
20     });
21 });

Border Layout

邊界佈局一般是Ext JS 4應用程序的主佈局。您可使用諸如頁眉、頁腳和菜單這樣的區域來設計一個主佈局。在Ext JS 4中，主要用於構建單頁面應用程序，邊界佈局用於設計頁面的整個佈局。

邊界佈局將頁面劃分爲不一樣的區域，如南北、東、西、和中心。中心區域必須進行配置，而其餘區域是可選的。

 1 Ext.onReady(function() {
 2     new Ext.Viewport({
 3         layout : 'border',
 4         items : [{
 5             region : "north",
 6             height : 50,
 7             title : "頂部面板"
 8         }, {
 9             region : "south",
10             height : 50,
11             title : "底部面板"
12         }, {
13             region : "center",
14             title : "中央面板"
15         }, {
16             region : "west",
17             width : 100,
18             title : "左邊面板"
19         }, {
20             region : "east",
21             width : 100,
22             title : "右邊面板"
23         }]
24     })
25 });

Card Layout

 

卡片佈局，當在一個容器上使用時，把它的物品看成一個卡片的集合，而且在任什麼時候候只顯示一個項目。

卡片佈局有一個重要的屬性叫作activeItem，它包含要顯示的項的信息。必須對該屬性進行操做，以更改要顯示的項。

 

 1 Ext.onReady(function() {
 2     var testpanel = new Ext.Panel({
 3         layout : 'card', // 卡片式佈局
 4         activeItem : 0, // 設置默認顯示的第一個子面板
 5         title : 'Ext.layout.CardLayout',
 6         frame : true,
 7         renderTo : Ext.getBody(),
 8         bodyPadding : 5,
 9         width : 600,
10         height : 400,
11         defaults : {
12             bodyStyle : 'background-color:#FFFFFF'
13         },
14         // 面板items配置項默認的xtype類型爲panel 該默認值能夠經過defaultType配置項進行更改
15         items : [{
16             title : '嵌套面板一',
17             html : '說明一',
18             id : 'p1'
19         }, {
20             title : '嵌套面板二',
21             html : '說明二',
22             id : 'p2'
23         }, {
24             title : '嵌套面板三',
25             html : '說明三',
26             id : 'p3'
27         }],
28         buttons : [{
29             text : '上一頁',
30             handler : changePage
31         }, {
32             text : '下一頁',
33             handler : changePage
34         }]
35     });
36     // 切換子面板
37     function changePage(btn) {
38         var index = Number(testpanel.layout.activeItem.id.substring(1));
39         if (btn.text == '上一頁') {
40             index -= 1;
41             if (index < 1) {
42                 index = 1;
43             }
44         } else {
45             index += 1;
46             if (index > 3) {
47                 index = 3;
48             }
49         }
50         testpanel.layout.setActiveItem('p' + index);
51     }
52 });

Summary

在本章中，我討論了Ext JS 4的控件和佈局。全部的UI控件都是從ext.component繼承的。組件提供了幾個屬性、方法和事件。Ext.container。容器類充當全部容器控件的基類，如面板、視圖和工具欄。表單面板表示標準的HTML表單，具備諸如驗證、處理等功能。您能夠將字段控件添加到表單面板中。Ext.layout。佈局是全部佈局組件的基類。邊界佈局定義了應用程序的主佈局，而卡片佈局用於顯示任什麼時候間點上的一個項目。