周末2天好好學習了下布局，現在都給實現了吧。
5、border布局：
Border布局將容器分為五個區域：north、south、east、west和center。除了center區域外，其他區域都需要設置寬高，center區域寬高與其他區域有關。容器內部除去west、north、east、south的寬高，由center區域自動填滿。
1 Ext.create('Ext.panel.Panel',{ 2 width: 700, 3 height: 500, 4 title: 'Border Layout', 5 layout: 'border', 6 renderTo: 'border', 7 margin: '50 150 50 50', 8 border : true, 9 defaults:{ 10 xtype: 'panel' 11 }, 12 items: [{ 13 title: 'North Region is resizable', 14 region: 'north', 15 height: 100, 16 html: 'north', 17 split: true 18 },{ 19 title: 'South Region is resizable', 20 region: 'south', 21 height: 100, 22 html: 'south', 23 split: true 24 },{ 25 title: 'West Region is collapsible', 26 region:'west', 27 width: 200, 28 collapsible: true, 29 html: 'west', 30 margin: '0 5 0 0', 31 layout: 'fit' 32 },{ 33 title: 'East Region is collapsible', 34 region:'east', 35 width: 200, 36 collapsible: true, 37 html: 'east', 38 margin: '0 0 0 5', 39 layout: 'fit' 40 },{ 41 title: 'Center Region', 42 region: 'center', 43 html: 'center', 44 layout: 'fit' 45 }] 46 })
效果：
配置項:
1、region:Border布局下各區域的默認權重. 當某區域項不含weight屬性時使用. 此對象必須包含所有區域 ("north", "south", "east" 和 "west").
2、margin:為組件設置margin. margin 可以是一個數值適用於所有邊 或者它可以是每個樣式的CSS樣式規范, 例如: '10 5 3 10'.
6、card布局:
Card布局是Fit布局的子類。
特點：
1. 容器內只能顯示一個子元素，若設置多個子元素，則只顯示第一個子元素；
2. 可通過設置setActiveItem方法來展示其他子元素；
3. 容器子元素隨容器大小變化。
1 var navigate = function(panel, direction){ 2 var layout = panel.getLayout(); 3 layout[direction](); 4 Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); 5 Ext.getCmp('move-next').setDisabled(!layout.getNext()); 6 }; 7 var card = Ext.create('Ext.panel.Panel', { 8 title: 'Card Layout', 9 width: 400, 10 height: 200, 11 layout: 'card', 12 activeItem: 0, 13 renderTo: 'card', 14 margin: '50 150 50 50', 15 border: true, 16 defaults: { 17 xtype: 'panel', 18 border: true 19 }, 20 bbar: [{ 21 id: 'move-prev', 22 text: 'Back', 23 handler: function(btn) { 24 navigate(btn.up("panel"), "prev"); 25 }, 26 disabled: true 27 }, 28 '->', 29 { 30 id: 'move-next', 31 text: 'Next', 32 handler: function(btn) { 33 navigate(btn.up("panel"), "next"); 34 } 35 }], 36 items: [{ 37 id: 'card-0', 38 html: 'Step1' 39 },{ 40 id: 'card-1', 41 html: 'Step2' 42 },{ 43 id: 'card-2', 44 html: 'Step3' 45 }] 46 });
效果：
7、Column布局:
Column布局為Auto布局的子類，用於設置子元素的寬度。
特點：
1. 容器子元素的寬度會隨容器寬度而變化；
2. 容器子元素的高度不隨容器高度而變化；
配置項：
columnWidth：子元素配置項。設置子元素的寬度（值必須為百分數或小於1的小數）。
1 var column = Ext.create('Ext.panel.Panel',{ 2 title: 'Column Layout', 3 width: 400, 4 layout: 'column', 5 margin: '50 150 50 50', 6 border: true, 7 renderTo: 'column', 8 defaults: { 9 xtype: 'panel', 10 border: true, 11 margin: '2 2 2 2', 12 height: 100 13 }, 14 items: [{ 15 html: 'column1', 16 columnWidth: 1/2 17 },{ 18 html: 'column2', 19 columnWidth: .25 20 },{ 21 html: 'column3', 22 columnWidth: 1/4 23 }] 24 });
效果：
8、Container布局:
這個是一個布局的基類, 能使當容器只包含一個子元素時, 子元素自動填滿容器. 此類應該通過layout :'fit' 屬性進行擴展或創建, 通常應該不需要通過 類名關鍵字進行直接創建.
Fit並沒有任何直接的配置參數(繼承的除外), 要通過Fit布局使一個面板填充一個容器, 只需簡單的設置容器layout: 'fit'屬性, 然后給容器 添加一個唯一面板即可.
1 var fit = Ext.create('Ext.panel.Panel',{ 2 title: 'Fit Layout', 3 width: 400, 4 height: 200, 5 layout: 'fit', 6 margin: '50 150 50 50', 7 border: true, 8 renderTo: 'fit', 9 items: { 10 title: 'Inner Panel', 11 html: 'This is the inner panel content!', 12 margin: '2 2 2 2', 13 border: true 14 } 15 });
效果:
9、VBox與HBox布局:
HBox布局與VBox布局相似，差別在於前者用於組織子元素在容器內部水平方向的布局，后者則為垂直方向的布局。
特點：
(1) 容器子元素會隨容器大小而變化；
(2) 通過三個可選的配置項來組織子元素相對於容器的寬和高。
配置項：
(1) flex：子元素配置項。各個子元素的的flex配置項會相互作用來決定子元素在容器內的寬度(HBox)或者高度(VBox)。以VBox為例，如子元素1的flex為1，而子元素2的flex為2，而容器高度為90，那么子元素1的高度就為30，而子元素2的高度為60，HBox亦然。
(2) align：layout屬性配置項。設置各個子元素的垂直方向的對齊，可選值有：
left：默認值，左對齊；
center：中心線對齊；
strech：使各個子元素的寬度(HBox)或者高度(VBox)為容器body的寬度(HBox)或者高度(VBox)來對齊；
strechmax：以最寬的子元素的寬度(HBox)或者高度(VBox)作為其他各個子元素的寬度(HBox)或者高度(VBox)來對齊。
(3) pack：layout屬性配置項。設置所有子元素組成的元素塊是緊靠容器的左、中、右中哪個位置，可選值有：
start：默認值，靠容器的左邊；
center：靠中間；
end：靠容器的右邊。
HBox:
10、Table布局:
這些都是一些基本布局，更多復雜應用也只不過是布局的嵌套，具體實現成什么樣，還得看實際上的需求。
1 var hbox = Ext.create('Ext.panel.Panel',{ 2 width: 400, 3 height: 300, 4 title: "HBoxLayout Panel", 5 border: true, 6 margin: '50 150 50 50', 7 renderTo: 'hbox', 8 layout: { 9 type: 'hbox', 10 align: 'stretch' 11 }, 12 items: [{ 13 xtype: 'panel', 14 title: 'Inner Panel One', 15 html: 'One', 16 border: true, 17 margin: '2 2 2 2', 18 flex: 2 19 },{ 20 xtype: 'panel', 21 title: 'Inner Panel Two', 22 html: 'One', 23 border: true, 24 margin: '2 2 2 2', 25 flex: 1 26 },{ 27 xtype: 'panel', 28 title: 'Inner Panel Three', 29 html: 'One', 30 border: true, 31 margin: '2 2 2 2', 32 flex: 1 33 }] 34 });
VBox:
1 var vbox = Ext.create('Ext.panel.Panel',{ 2 width: 400, 3 height: 300, 4 title: "VBoxLayout Panel", 5 border: true, 6 margin: '50 150 50 50', 7 renderTo: 'vbox', 8 layout: { 9 type: 'vbox', 10 align: 'center' 11 }, 12 renderTo: 'vbox', 13 items: [{ 14 xtype: 'panel', 15 title: 'Inner Panel One', 16 html: 'One', 17 border: true, 18 margin: '2 2 2 2', 19 width: 250, 20 flex: 2 21 }, 22 { 23 xtype: 'panel', 24 title: 'Inner Panel Two', 25 html: 'Two', 26 border: true, 27 margin: '2 2 2 2', 28 width: 250, 29 flex: 4 30 }, 31 { 32 xtype: 'panel', 33 title: 'Inner Panel Three', 34 html: 'Three', 35 border: true, 36 margin: '2 2 2 2', 37 width: '50%', 38 flex: 4 39 }] 40 });
效果:
10、Table布局:
使用Table布局那么將生成HTML的Table標簽來作為布局的容器。
特點：
1. 可通過配置來設置容器子元素的大小是否隨容器的大小變化
配置項：
1. columns：設置表格布局的列數；
2. tableAttrs：設置表格的屬性（如style等）
3. trAttrs：設置行的屬性
4. tdAttrs：設置單元格的屬性
5. colspan：設置跨列數目
6. rowspan：設置跨行數目
1、2、3和4為layout配置項的屬性，5、6為子元素的配置項。
注意：子元素的排列次序為由左至右，由上到下。
1 var table = Ext.create('Ext.panel.Panel',{ 2 title: 'Table Layout', 3 width: 400, 4 height: 160, 5 renderTo: 'table', 6 border: true, 7 margin: '50 150 50 50', 8 layout: { 9 type: 'table', 10 columns: 3 11 }, 12 defaults: {14 border: true, 15 margin: '2 2 2 2', 16 }, 17 items: [{ 18 html: 'Cell A content', 19 rowspan: 2 20 },{ 21 html: 'Cell B content', 22 colspan: 2 23 },{ 24 html: 'Cell C content', 25 cellCls: 'highlight' 26 },{ 27 html: 'Cell D content' 28 }] 29 });
效果:
這些都是一些基本布局，更多復雜應用也只不過是布局的嵌套，具體實現成什么樣，還得看實際上的需求。
多多練習各種情況下的用法，熟悉各種配置，是以后在學習工作中的首要任務。