所謂布局，簡單來說就是決定把什麼東西放到什麼位置上，對於管理軟體來說，一般都是首部放標題，左邊放選單欄，空餘的右下方用來顯示具體的內容。本章將詳細介紹ext中布局的用法。
我們可以用ext.viewport類對整個頁面進行整體布局，具體使用方法如下：
[c-sharp]view plain
copy
var viewport=new ext.viewport(,,]
});
效果圖如圖1所示：
圖1 傳統的布局形式
ext.layout.borderlayout布局把整個布局區域分成東、西、南、北、中5個部分，除了中間區域以外，其他的區域又都是可以省略的，因此我們可以利用它製作出更複雜、更靈活的布局。具體**如下：
[c-sharp]view plain
copy
var viewport2=new ext.viewport(,,,,]
});
效果圖如圖2所示。
圖2 使用borderlayout的布局
注意：center是絕對不能省略的，如果items中缺少了region:'center'就會報錯，會造成程式中斷。
2.1 設定子區域的大小
我們僅僅需要新增width和height引數，這樣就可以指定每個子區域的大小了。但是，north和south兩個區域只能指定高度值，寬度值由borderlayout自動計算；east和west只能指定寬度值，高度值由borderlayout自動計算；center區域的大小由其他4個部分決定。設定的**如下所示：
[c-sharp]view plain
copy
var viewport2=new ext.viewport(,,,,]
});
2.2 使用split並限制它的範圍
使用split後，我們可以允許使用者自動拖放以改變某乙個區域的大小，實現的方式只要設定split:true引數即可實現，具體**如下。
實現效果圖如圖3所示。
圖3 設定split:true後的效果圖
2.3 子區域的展開和摺疊
該功能可以讓乙個區域展開和摺疊(相當於隱藏)，實現的方式只需要配置幾個引數即可，具體**如下，主要配置引數是collapsible:true，這個引數啟用了某個區域的摺疊功能，而且前面的title引數也是必須設定的。實現**和效果圖如下所示。
圖4 帶有摺疊效果的布局
accordion是ext中預設布局的一部分，如果想用它，直接將區域加上layout:'accordion'即可，其他部分基本無需改動。我們利用viewport製作出只有west和center兩個區域的borderlayout，在west部分放上accordion，實現方式如下面**所示。
[c-sharp]view plain
copy
var viewport=new ext.viewport(,
items:[,,]
},]
});
效果圖如圖5所示。
圖5 使用了accordion的示例
設定了layout:'accordion'後，再使用items新增3個元素，記得每個子元素裡都要加上title引數，accordion沒有提供預設的標題，不設定標題是一定會出錯的。與布局有關的配置項都寫到layoutconfig裡。
ExtJS的使用方法彙總 5 布局
所謂布局，簡單來說就是決定把什麼東西放到什麼位置上，對於管理軟體來說，一般都是首部放標題，左邊放選單欄，空餘的右下方用來顯示具體的內容。本章將詳細介紹ext中布局的用法。我們可以用ext.viewport類對整個頁面進行整體布局，具體使用方法如下 view plain copy to clipboa...
談談Ext JS的元件 布局的使用方法
在ext js中，包含兩類布局 元件類布局和容器類布局。由於有些元件是有不同的元件組合而成的，如字段就由標題和輸入框構成，他們之間也是存在布局關係的，而這 就需要元件類布局來處理元件內自己特有的布局關係。如果我們不定義自己的元件，基本不需要使用到元件布局，知道就行了。本文主要介紹的是容器類布局，因為...
談談Ext JS的元件 布局的使用方法續二
絕對布局讓我回想到了使用foxpro開發的時候，哪時候的介面布局就是這樣，通過設定控制項的左上角座標 x，y 和寬度來進行的，因為輸入控制項的 高度基本是固定的，所以不需要設定。在視覺化程式設計沒有出現之前，開發介面算是個苦差事，因為布局是需要花費不少功夫的，例如想要在已經定義好的元件中插入 乙個元...