序言
1、百度百科上說：ExtJs功能豐富，無人能出其右。無論是界面之美，還是功能之強，extjs都高居榜首。
2、呵呵，界面之美當是少不了布局的，這篇文章我寫layout的七種布局。（extjs是4.+版本）
Border布局__邊界布局
這中布局是最常用的布局之一，看圖
border布局：border布局也稱邊界布局，他將頁面分隔為west,east,south,north,center這五個部分，我們需要在其items中指定使用region參數為其子元素指定具體位置。
注意：north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。north south west east區域變大，center區域就變小了。
參數 split:true 可以調整除了center四個區域的大小。
參數 collapsible:true 將激活折疊功能。
center 區域是必須使用的，Center區域會自動填充其他區域的剩余空間。尤其在Extjs4.0中，當指定布局為border時，如果沒有指定center區域時，會出現報錯信息。
Ext.onReady(function () { new Ext.Viewport({ title: "Viewport", layout: "border", defaults: { bodyStyle: "background-color: #FFFFFF;", frame: true }, items: [ { region: "west", width:90, title: 'north', collapsible: true }, { region: "east", width: 90, title: 'north', collapsible: true }, { region: "north", height: 100, title:'north' , collapsible:true }, { region: "center", split: true, border: true, collapsible: true,title:'center' }, { region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 }, ] }); });
Accordion布局__手風琴布局
accordion布局：accordion布局也稱手風琴布局，在accordion布局下，在任何時間里，只有一個面板處於激活狀態。其中每個面邊都支持展開和折疊。注意：只有Ext.Panels 和所有Ext.panel.Panel 子項，才可以使用accordion布局。
Ext.onReady(function () { var accordion = Ext.create("Ext.panel.Panel", { title: "west", layout: "accordion", //設置為手風琴布局 layoutConfig: { animate: true }, width: 250, minWidth: 90, region: "west", //設置方位 split: true, collapsible: true, items: [ { title: "嵌套面板一", html: "嵌套面板一", iconCls: "save" }, { title: "嵌套面板二", html: "嵌套面板二", iconCls: "search" }, { title: "嵌套面板三", html: "嵌套面板三", iconCls: "back" }, { title: "嵌套面板四", html: "嵌套面板四", iconCls: "12" } ] }); new Ext.Viewport({ title: "Viewport", layout: "border", //這里是（border）邊界布局 defaults: { bodyStyle: "background-color: #FFFFFF;", frame: true }, items: [ accordion, //這里是（accordion）手風琴布局 {region: "east", width: 90, title: 'north', collapsible: true }, { region: "north", height: 100, title: 'north', collapsible: true }, { region: "center", split: true, border: true, collapsible: true, title: 'center' }, { region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 } ] }); });
Card布局__類似向導
Card布局：這種布局用來管理多個子組件，並且在任何時刻只能顯示一個子組件。這種布局最常用的情況是向導模式，也就是我們所說的分布提交。Card布局可以使用layout:'card'來創建。
注意：由於此布局本身不提供分步導航功能，所以需要用戶自己開發該功能。由於只有一個面板處於顯示狀態，那么在初始時，我們可以使用setActiveItem功能來指定某一個面板的顯示。當要顯示下一個面板或者上一個面板的時候，我們可以使用getNext()或getPrev()來得到下一個或上一個面板。然后使用setDisabled方法來設置面板的顯示。另外，如果面板中顯示的是FORM布局，我們在點擊下一個面板的時候，處理FORM中提交的元素，通過AJAX將表單中的內容保存到數據庫中或者SESSION中。
下面的示例代碼展示了一個基本的Card布局，布局中並沒有包含form元素，具體情況，還要根據實際情況進行處理：
//Card布局__類似向導 Ext.application({ name: 'HelloExt', launch: function () { var navigate = function (panel, direction) { var layout = panel.getLayout(); layout[direction](); Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); }; Ext.create('Ext.panel.Panel', { title: 'Card布局示例', width: 300, height: 202, layout: 'card', activeItem: 0, x: 30, y: 60, bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [{ id: 'move-prev', text: '上一步', handler: function (btn) { navigate(btn.up("panel"), "prev"); }, disabled: true }, '->', { id: 'move-next', text: '下一步', handler: function (btn) { navigate(btn.up("panel"), "next"); } }], items: [{ id: 'card-0', html: '<h1>第一步</h1>' }, { id: 'card-1', html: '<h1>第二步</h1>' }, { id: 'card-2', html: '<h1>最后一步</h1>' }], renderTo: Ext.getBody() }); } });
fit 布局
在Fit布局中，子元素將自動填滿整個父容器。
注意：在fit布局下，對其子元素設置寬度是無效的。如果在fit布局中放置了多個組件，則只會顯示第一個子元素。典型的案例就是當客戶要求一個window或panel中放置一個GRID組件，grid組件的大小會隨着父容器的大小改變而改變。
//fit 布局 Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', width: '800px', //沒有做用的 items: [ { title: 'Hello Ext', html: 'Hello! Welcome to Ext JS.' }, { title: ' 媽咪媽咪哄 ', html: '這個子控件是不會顯示的，嗚哈哈哈！' } ] }); } });
Anchor布局
anchor布局將使組件固定於父容器的某一個位置，使用anchor布局的子組件尺寸相對於容器的尺寸，即父容器容器的大小發生變化時，使用anchor布局的組件會根據規定的規則重新渲染位置和大小。
AnchorLayout布局沒有任何的直接配置選項（繼承的除外），然而在使用AnchorLayout布局時，其子組件都有一個anchor屬性，用來配置此子組件在父容器中所處的位置。
anchor屬性為一組字符串，可以使用百分比或者是-數字來表示。配置字符串使用空格隔開，例如
anchor:'75% 25%'，表示寬度為父容器的75%，高度為父容器的25%
anchor:'-295 -300'，表示組件相對於父容器右邊距為295，相對於父容器的底部位300
anchor:'-250 10%'，混合模式，表示組件黨對於如容器右邊為250，高度為父容器的10%
//Anchor布局 Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.Panel', { width: 500, height: 400, title: "Anchor布局", layout: 'anchor', x: 60, y: 80, renderTo: Ext.getBody(), items: [{ xtype: 'panel', title: '75% Width and 25% Height', anchor: '75% 25%' }, { xtype: 'panel', title: 'Offset -300 Width & -200 Height', anchor: '-295 -300' }, { xtype: 'panel', title: 'Mixed Offset and Percent', anchor: '-250 10%' }] }); } });
Absolute布局
Absolute布局繼承Ext.layout.container.Anchor 布局方式，並增加了X/Y配置選項對子組件進行定位，Absolute布局的目的是為了擴展布局的屬性，使得布局更容易使用。
//Absolute布局 Ext.application({ name: "HelloExt", launch: function () { Ext.create('Ext.form.Panel', { title: 'Absolute布局', width: 300, height: 275, x: 200, y: 90, layout: 'absolute', defaultType: 'textfield', items: [{ x: 10, y: 10, xtype: 'label', text: 'Send To:' }, { x: 80, y: 10, name: 'to', anchor: '90%' //控件從居左80px處，拉長到居左90%處 }, { x: 10, y: 40, xtype: 'label', text: 'Subject:' }, { x: 80, y: 40, name: 'subject', anchor: '90%' }, { x: 0, y: 80, xtype: 'textareafield', name: 'msg', anchor: '100% 80%' //控件從居左0px處拉長100%，空間從居上80px處，拉長至余下控件高度的80%處 }], renderTo: Ext.getBody() }); } });
Column布局__列布局
Column布局一般被稱為列布局，這種布局的目的是為了創建一個多列的格式。其中每列的寬度，可以為其指定一個百分比或者是一個固定的寬度。
Column布局沒有直接的配置選項（繼承的除外），但Column布局支持一個columnWidth屬性，在布局過程中，使用columnWidth指定每個面板的寬度。
注意：使用Column布局布局時，其子面板的所有columnWidth值加起來必須介於0~1之間或者是所占百分比。他們的總和應該是1。
另外，如果任何子面板沒有指定columnWidth值，那么它將占滿剩余的空間。
Ext.application({ name: "HelloExt", launch: function () { Ext.create('Ext.panel.Panel', { title: 'Column Layout - 按比例', width: 350, height: 250, x: 20, y: 100, layout: 'column', items: [{ title: 'Column 1', columnWidth: .25 }, { title: 'Column 2', columnWidth: .55 }, { title: 'Column 3', columnWidth: .20 }], renderTo: Ext.getBody() }); } });