ExtJs經常使用佈局--layout詳解（含實例）

序言：

筆者用的ExtJs版本：ext-3.2.0

ExtJs常見的佈局方式有：border、form、absolute、column、accordion、table、fit、card、anchor

另外，不常見的佈局有：tab、vbox、hbox

本文全部實例代碼已提供下載，下載連接：ExtJs經常使用佈局--layout詳解實例代碼

 

簡介：

最經常使用的邊框佈局——BorderLayout

最簡單的佈局——FitLayout

製做伸縮菜單的佈局——Accordion

實現操做嚮導的佈局——CardLayout

控制位置和大小的佈局——AbsoluteLayout

表單專用的佈局——FormLayout

分列布局——ColumnLayout

表格狀佈局——TabelLayout

BoxLayout——HBox

BoxLayout——VBox

 

1、border 佈局

簡介：也稱「邊界佈局」、「方位佈局」。該佈局把容器分爲東、南、西、北、中五個區域,分別由east、south、west、north、center表示。咱們須要在items中使用region參數來給它定位。

注意：north和south部分只能設置高度（height），west和east部分只能設置寬度（width）。center區域必須有，且它的大小是在其餘4個部分設置好之後自動計算出來的，因此不能爲它指定寬度值或高度值。

js代碼：

 

1.  
   var borderPanel = new Ext.Panel({
2.  
   renderTo: 'borderDiv',
3.  
   layout: 'border',
4.  
   tltle: 'Border Layout',
5.  
   width: 1000,
6.  
   height: 800,
7.  
   defaults: {
8.  
   collapsible: true, // 支持該區域的展開和摺疊
9.  
   split: true, // 支持用戶拖放改變該區域的大小
10.  
    bodyStyle: 'padding:15px'
11.  
    },
12.  
    items: [{
13.  
    title: 'Footer-s',
14.  
    region: 'south',
15.  
    height: 100,
16.  
    minSize: 75,
17.  
    maxSize: 250,
18.  
    html: '這是南邊區域 south'
19.  
     
20.  
    }, {
21.  
    titlr: 'Main Content-c',
22.  
    region: 'center',
23.  
    collapsible: false,
24.  
    html: '這是中間區域 center'
25.  
    }, {
26.  
    title: 'Navigation-w',
27.  
    region: 'west',
28.  
    width: 150,
29.  
    minSize: 100,
30.  
    maxSize: 250,
31.  
    html: '這是西邊區域 west'
32.  
    }, {
33.  
    title: 'North',
34.  
    region: 'north',
35.  
    height: 100,
36.  
    html: '這是北邊區域 north'
37.  
    }, {
38.  
    title: 'East',
39.  
    region: 'east',
40.  
    width: 150,
41.  
    html: '這是東邊區域 east'
42.  
    }]
43.  
    }); </span>

運行結果：

 

 

 

2、form 佈局

簡介：也稱「表單佈局」。是一種專門用於管理表單中輸入字段的佈局,這種佈局在程序中主要用於建立表單字段或表單元素使用。

注意：它能夠是一種佈局樣式，也能夠是一個組件。也就是說既能夠 layout : ‘form’ 也能夠 new Ext.FormPanel 來使用它。區別就是對於 Panel 咱們配置了 layout 爲 form ，而對於 FormPanel 它默認的佈局就是form佈局，因此對於習慣於用 Panel 而不習慣用 FormPanel 的朋友儘管用Panel,可是必定要考慮好提交的問題，若是使用 panel 的話，要作提交但是要一個個得到控件的值的，而 FromPanel 則不須要。

js代碼：

 

1.  
   var formPanel = new Ext.FormPanel({
2.  
   renderTo: 'formDiv',
3.  
   width: 500,
4.  
   height: 300,
5.  
   labelWidth: 80,
6.  
   defaultType: 'textfield',
7.  
   frame: true,
8.  
   items: [{
9.  
   fieldLabel: '用戶名',
10.  
    name: 'username'
11.  
    }, {
12.  
    fieldLabel: '密碼',
13.  
    name: 'password'
14.  
    }, {
15.  
    fieldLabel: '日期',
16.  
    name: 'date',
17.  
    xtype: 'datefield',
18.  
    }]
19.  
    }); </span>

運行結果：

 

 

3、absolute 佈局

簡介：也稱「絕對定位佈局」。該佈局使用很簡單粗暴，直接給出其x、y值來定位便可。

注意：x、y值是相對其父容器而言，從左上角（0,0）開始計算。

js代碼：

 

1.  
   var absolutePanel = new Ext.Panel({
2.  
   renderTo: 'absoluteDiv',
3.  
   layout: 'absolute',
4.  
   title: 'Absolute Layout',
5.  
   width: 500,
6.  
   height: 300,
7.  
   items: [{
8.  
   title: 'panel-1',
9.  
   x: 50,
10.  
    y: 50,
11.  
    html: 'x:50,y:50'
12.  
    }, {
13.  
    title: 'panel-2',
14.  
    x: 100,
15.  
    y: 100,
16.  
    html: 'x:100,y:100',
17.  
    }]
18.  
    }); </span>

運行結果：

 

 

4、column 佈局

簡介：也稱「列布局」。該佈局把整個容器組件當作一列,而後往裏面放入子元素的時候,能夠經過子元素制定columnWidth和width來制定列的寬度,columnWidth是按百分比來制定列的寬度,width是按照絕對像素來制定列的寬度。在實際應用中能夠兩種混合使用。

注意：該佈局的子面板的全部columnWidth值必須在0~1之間或者是百分比。columnWidth值的總和應該爲1，即100%。另外，若是任何子面板沒有指定columnWidth值，那麼它將佔滿剩餘的空間。 

js代碼：

1.  
   var columnPanel = new Ext.Panel({
2.  
   renderTo: 'columnDiv',
3.  
   layout: 'column',
4.  
   width: 500,
5.  
   height: 300,
6.  
   items: [{
7.  
   title: 'Width = 25%',
8.  
   columWidth: .25,
9.  
   html: '111111111111'
10.  
    }, {
11.  
    title: 'Width = 75%',
12.  
    columnWidth: .75,
13.  
    html: '111111111111'
14.  
    }, {
15.  
    title: 'Width = 200px',
16.  
    width: 200,
17.  
    html: '111111111111'
18.  
    }]
19.  
    }); </span>

運行結果:

 

 

5、accordion 佈局

簡介：也稱「可摺疊佈局」、「手風琴佈局」。該佈局的容器的子元素是可摺疊的形式表現。

注意：只有Ext.Panels 和全部Ext.panel.Panel 子項，纔可使用accordion佈局。

js代碼：

 

1.  
   var accordionPanel = new Ext.Panel({
2.  
   renderTo: 'accordionDiv',
3.  
   layout: 'accordion',
4.  
   title: 'Accordion Layout',
5.  
   width: 500,
6.  
   height: 300,
7.  
   layoutConfig: {animate: false},
8.  
   items: [{
9.  
   title: 'panel-1', html: 'hello accordion'
10.  
    }, {
11.  
    title: 'panel-2', html: '<p>段落</p>'
12.  
    }, {
13.  
    title: 'panel-3', html: '<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>'
14.  
    }, {
15.  
    title: 'panel-4', html: '<button>按鈕</button>'
16.  
    }]
17.  
    }); </span>

運行結果：

 

6、table 佈局

簡介：也稱「表格佈局」。按照普通表格的方法佈局子元素，用 layoutConfig:{columns:3} ,//將父容器分紅3列。它的item可配置的參數有：rowspan 合併的行數；colspan 合併的列數。

注意：table佈局自己並無什麼特殊功能，它所實現的效果其實徹底能夠用 border 佈局和 column 佈局等方式代替，並且這些佈局方式更靈活。

js代碼：

 

1.  
   <pre name= "code" class="javascript">var tablePanel = new Ext.Panel({
2.  
   renderTo: 'tableDiv',
3.  
   width: 500,
4.  
   height: 300,
5.  
   layout: 'table',
6.  
   layoutConfig: {columns: 3},//定義了一共要分3列
7.  
   items: [
8.  
   { title: 'panel-1', html: '1111111111',rowspan:2},//合併了2行
9.  
   { title: 'panel-2', html: '2222222222',colspan:2},//合併了2列
10.  
    { title: 'panel-3', html: '3333333333'},
11.  
    { title: 'panel-4', html: '4444444444'}
12.  
    ]
13.  
    });

運行結果：

 

7、fit 佈局

簡介：也稱「自適應佈局」。子元素將自動填滿整個父容器。。

注意：在fit佈局下，對其子元素設置寬度是無效的。若是在fit佈局中放置了多個組件，則只會顯示第一個子元素。

js代碼：

 

1.  
   var fitPanel = new Ext.Panel({
2.  
   renderTo: 'fitDiv',
3.  
   layout: 'fit',
4.  
   width: 500,
5.  
   height: 300,
6.  
   items: [{
7.  
   title: 'Fit Panel',
8.  
   html: '111111111111'
9.  
   }]
10.  
    }); </span>

運行結果：

 

 

8、card 佈局

簡介：也稱「卡牌佈局」、「卡片式佈局」。該佈局最TMD麻煩了。這種佈局用來管理多個子組件，而且在任什麼時候刻只能顯示一個子組件。這種佈局最經常使用的狀況是嚮導模式，也就是咱們所說的分步提交。

注意：因爲此佈局自己不提供分步導航功能，因此須要用戶本身開發該功能。能夠經過調用 setActiveItem( ) 函數來實現跳轉。因爲只有一個面板處於顯示狀態，那麼在初始時，咱們可使用 activeItem： 屬性來指定某一個面板的顯示。對了，若是Ext-4 以後的版本就不是這樣操做了。

js代碼：

 

1.  
   // card佈局所須要的跳轉方法-setActiveItem
2.  
   var i=0;
3.  
   var navHandler = function(direction){
4.  
    
5.  
   if (direction == -1){
6.  
   i--;
7.  
   if (i < 0) { i = 0;}
8.  
   }
9.  
   if (direction == 1){
10.  
    i++;
11.  
    if (i > 2) { i = 2; return false;}
12.  
    }
13.  
    cardPanel.getLayout().setActiveItem(i);
14.  
    };
15.  
     
16.  
    var cardPanel = new Ext.Panel({
17.  
    renderTo: 'cardDiv',
18.  
    layout: 'card',
19.  
    title:'註冊嚮導',
20.  
    width: 500,
21.  
    height: 300,
22.  
    activeItem: 0,
23.  
    bodyStyle:'padding:15px',
24.  
    defaults:{
25.  
    border:false
26.  
    },
27.  
    bbar: [ {
28.  
    id: 'move-prev',
29.  
    text: '«Previous',
30.  
    handler:navHandler.createDelegate(this,[-1])
31.  
    }, '->', {
32.  
    id: 'move-next',
33.  
    text: 'Next »',
34.  
    handler:navHandler.createDelegate(this,[1])
35.  
    }],
36.  
    items: [{
37.  
    id: 'card-0',
38.  
    html: '<h1>歡迎來到註冊嚮導！</h1><p>Step 1 of 3</p>'
39.  
    }, {
40.  
    id: 'card-1',
41.  
    html: '<h1>請填寫註冊資料！</h1><p>Step 2 of 3</p>'
42.  
    }, {
43.  
    id: 'card-2',
44.  
    html: '<h1>註冊成功！</h1><p>Step 3 of 3 - Complete</p>'
45.  
    }]
46.  
    }); </span>

運行結果：

 

 

9、anchor 佈局

簡介：也稱「錨點佈局」。感受無卵用， anchor佈局將使組件固定於父容器的某一個位置，使用anchor佈局的子組件尺寸相對於容器的尺寸，即父容器容器的大小發生變化時，使用anchor佈局的組件會根據規定的規則從新渲染位置和大小。

注意：anchor屬性爲一組字符串，可使用百分比或者是-數字（注意前面是有負號的，即數字爲負數）來表示，字符串之間用空格隔開。

js代碼：

1.  
   var anchorPanel = new Ext.Panel({
2.  
   renderTo: 'anchorDiv',
3.  
   layout: 'anchor',
4.  
   title: 'Anchor Layout',
5.  
   width: 500,
6.  
   height: 300,
7.  
   items: [{
8.  
   title: 'panel-1',
9.  
   height: 100,
10.  
    anchor: '-50',
11.  
    html: '高度等於100，寬度 = 容器寬度 - 50'
12.  
    }, {
13.  
    title: 'panel-2',
14.  
    height: 100,
15.  
    anchor: '50%',
16.  
    html: '高度等於100，寬度 = 容器寬度的50%'
17.  
    },{
18.  
    title:'panel-3',
19.  
    anchor: '50% 50%',
20.  
    html: '高度、寬度 = 容器的50%'
21.  
    }]
22.  
    }); </span>

運行結果：

 

10、tab 佈局

簡介：也稱「分頁佈局」、「標籤佈局」。

注意：碼字好累，這個佈局你懂得，很少說了。

js代碼：

 

1.  
   var tabPanel = new Ext.TabPanel({
2.  
   renderTo: 'tabDiv',
3.  
   width: 500,
4.  
   height: 300,
5.  
   activeTab: 0, // 默認顯示第一個Tab的內容
6.  
   defaults: {
7.  
   autoScroll: true
8.  
   },
9.  
   items: [{
10.  
    title: 'Tab-0',
11.  
    html: "第一個Tab的內容"
12.  
    }, {
13.  
    title: 'Tab-1',
14.  
    html: '我是另外一個Tab',
15.  
    }, {
16.  
    title: 'Tab-2',
17.  
    html: '這是一個能夠關閉的Tab',
18.  
    closable: true
19.  
    }]
20.  
    }); </span>

運行結果：

 

 

11、vbox 佈局

簡介：也稱「豎直佈局」。vertical box ，垂直方向的分行顯示。它的 item 有一個 flex屬性，其值越大，對應的組件就會佔據越大的空間。

注意：無

js代碼：

 

1.  
   var vboxPanel = new Ext.Panel({
2.  
   renderTo: 'vboxDiv',
3.  
   layout: {
4.  
   type: 'vbox',
5.  
   align: 'stretch' //拉伸使其充滿整個父容器
6.  
   },
7.  
   width: 500,
8.  
   height: 300,
9.  
   items: [{
10.  
    title: 'panel-1', html: 'flex:1', flex: 1
11.  
    }, {
12.  
    title: 'panel-2', html: 'height:150', height: 150
13.  
    }, {
14.  
    title: 'panel-3', html: 'flex:2', flex: 2
15.  
    }]
16.  
    }); </span>

運行結果：

 

12、hbox 佈局

簡介：也稱「水平佈局」。horizontal box ，水平方向的分列顯示。和 vbox 相似，有flex 屬性。

注意：無

js代碼：

 

1.  
   var hbox = new Ext.Panel({
2.  
   renderTo: 'hboxDiv',
3.  
   layout: {
4.  
   type: 'hbox',
5.  
   align: 'stretch'
6.  
   },
7.  
   width: 500,
8.  
   height: 300,
9.  
   items: [{
10.  
    title: 'panel-1', html: 'flex:1', flex: 1
11.  
    }, {
12.  
    title: 'panel-2', html: 'height:150', width: 150
13.  
    }, {
14.  
    title: 'panel-3', html: 'flex:2', flex: 2
15.  
    }]
16.  
    })< /span>

運行結果：

 

 

總結：

簡單總結起來border佈局通常做爲頁面總體佈局來使用；fit佈局適用於那種須要將子類徹底佔滿父類容器的狀況；column佈局用於多列；form是一種表單特有佈局方式，實質是一行一控件的形式；table佈局適用多行多列可是有時寬高不太容易控制。並且值得強調的一點就是給一個控件設置layout屬性，其實指的是其內部控件的佈局方式而不是它自己的佈局，這點要搞清楚。

 

----------------------------------------------------- end -----------------------------------------------------

最後感謝如下連接的做者提供的資源參考：

ExtJs佈局詳解

ExtJS中layout的12種佈局風格

extjs佈局方式

ExtJS之佈局篇

 原文連接：https://blog.csdn.net/fifteen718/article/details/51482826