《Ext JS 4 First Look》翻譯之三：布局

第三章 布局　　　　　　　　　　　　　　　　　　　　　　　　　　

     布局用於定義容器如何組織內部子元素和控制子元素的大小。在一個應用程序中，作為定義容器的組織形式，布局是一個十分重要的組件。是顯示單個子元素？還是垂直或水平顯示多個子元素？這些均由布局來定義。並且布局將占用應用程序大部分的呈現時間。Extjs4中對布局進行了重大的修整。下面我們將學習並熟悉Extjs中的布局。

本章目錄如下：

3.1. Extjs 4 布局

3.2. Container布局

　　3.2.1. Auto布局

　　3.2.2. Anchor布局

　　3.2.3. Absolute布局

　　3.2.4. HBox 布局

　　3.2.5. VBox 布局　

　　3.2.6.  Accordion 布局

　　3.2.7. Table 布局

　　3.2.8. Column 布局

　　3.2.9. Fit 布局

　　3.2.10.Card 布局

　　3.2.11. Border布局

　　3.2.12. Form布局

3.3. Component布局　

　　3.3.1. Dock 布局

　　3.3.2. Tool布局

　　3.3.3. Field布局

　　3.3.4. TriggerField布局

3.4. 總結

 

3.1. Extjs 4 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Extjs4對布局進行了重大的修整。布局引擎已被重寫，但API仍保持原樣，從而使得布局是向后兼容的。當然所生成的HTML標簽也作出了修整。

     Extjs2中引入了布局這一特性。當時其具有良好的性能和速度，但欠缺靈活性。后來的版本增強了靈活性卻犧牲了性能（譯者語：Extjs3在性能方面確實令不少人望而卻步啊！）。在Extjs4中對加載速度、性能和靈活性等方面都作出了改進，通過下面的圖例我們可以看到改進結果：

除了上述內容，Extjs4還引入兩類型的布局：Container 布局 和 Component 布局。

Component 布局：負責組織組件的HTML元素；

     包括：Dock布局、Toolbar布局、Field布局、TriggerField布局。

Container 布局：負責容器內容Extjs元素和調整Extjs元素的大小。

     包括：Border布局、Box布局、Fit布局等等。

（譯者語：如果接觸過Extjs舊有版本的朋友應該對Container布局不陌生了，而Component布局是Extjs4獨有的，但不由開發人員來設置、調用，而是框架中的組件已內置好的。）

 

3.2. Container布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     首先我們來看看Container布局的層級圖吧！

 

3.2.1. Auto布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     當沒有為容器（Container或其子類實例）配置layout配置項時就會使用Auto布局。

     特點：

     1. 容器子元素不隨容器大小變化而變化；

     2. 容器子元素按添加到容器的順序自上而下排列。

實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1',

height: 60,

width: 100

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

      html: 'Panel 2', 

height: 80,

width: 60

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: 'Panel 3',

height: 65,

      width: 100

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: 'Panel 4',

height: 70,

      width: '90%'

});

var auto = Ext.create('Ext.window.Window', {

title: 'Auto Layout',

width: 100,

height: 320,

//layout:'auto',

defaults: {

     bodyStyle: 'padding:15px'

},

      items: [panel1, panel2, panel3, panel4]

}); 

     上述實例創建了四個panel組件實例並作為window組件實例的子元素。

     defaults：用於統一設置其子元素的配置項。

     結果如下：

1. 如果我們放大或縮小window組件實例，其內部的Panel1、Panel2、Panel3和Panel4的大小將不會隨之變化；

2. Panel4中width值為90%表示該元素的寬度為父容器body寬度的90%。（在Chrome中使用百分比來設置寬度會出現沒有右邊框的異常）

 

3.2.2. Anchor布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     特點：

     1. 容器子元素會隨容器大小而變化；

     2. 子元素按添加到容器的次序，自上而下的排列;

     3. 子元素默認寬度為容器的body寬度。

     4. 通過子元素的x、y配置項可設置子元素離原來位置的左邊距和上邊距（效果如同position:relative,top:...,left:....）

 

     實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: '100% 30%',

anchor:'100% 30%'

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '80% 25%',

      anchor:'80% 25%'

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '-70 20%',

      anchor:'-70 20%'

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: '-30 25%',

      anchor:'-30 25%'

});

var anchor = Ext.create('Ext.window.Window', {

title: 'Anchor Layout',

width: 250,

height:300,

layout:'anchor',

defaults: {

     bodyStyle: 'padding:10px'

},

      items: [panel1, panel2, panel3, panel4]

});

 

anchor.show(); 

從實例我們可以知道，除了容器的layout配置項設為anchor后，若要定制子元素的布局細節就必須設置設置子元素的anchor配置項。（Ext.panel.Panel中有anchorSize這一配置項，但與布局中上述的anchor配置項功能不同，無法實現上述效果）

anchor值為字符串，若形如"80"、"-30"或"80%"表示設置子元素占容器的寬度；而形如"80 90"或"90 80%"等表示設置子元素占容器的寬度和高度。

1. 80等正數表示子元素離父容器左內邊框、上內邊框的距離；
2. -30等負數表示子元素離父容器右內邊框、下內邊框的距離；
3. 80%等百分數表示子元素占父容器寬度、高度的百分比。注意：對於高度使用百分比值時，每個子元素的最終的值都是“百分比*父容器的高度”。

改變容器大小后

 

3.2.3. Absolute布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     AbsoluteLayout是AnchorLayout的子類，其繼承了AnchoreLayout的所有特性。並且可以設置x和y配置項來相對與父容器來定位子元素。

     特點：

     1. 容器子元素會隨容器大小而變化；

     2. 子元素默認寬度為容器的body寬度；

     3. 子元素默認位置為容器的左上角（x:0,y:0），就是不設置各子元素的x、y配置項時，所有子元素會在容器的左上角重疊；

     4. 子元素通過x、y配置項來設置子元素離容器左內邊框、上內邊框的距離。

     

實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'x: 10; y: 10 - anchor: 80% 80%', /*this config option will display the given text inside the panel*/

anchor:'80% 80%',

x: 10,

y: 10

});

var absolute = Ext.create('Ext.window.Window', {

title: 'Absolute Layout',

width: 300,

height: 200,

layout:'absolute',

defaults: {

     bodyStyle: 'padding:10px'

},

      items: [panel1]

});

 

absolute.show(); 

 

注意：子元素的anchor屬性， 對於高度使用百分比值時，每個子元素的最終的值都是“百分比*父容器的剩余高度”， 父容器的剩余高度= 父容器的高度-較早添加到容器的子元素高度。所以子元素添加到容器的次序將在使用百分比設置子元素anchor屬性高度時起作用。

     

 

3.2.4. HBox 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     HBox布局組織子元素在容器內水平排列。

     特點：

          1. 容器子元素會隨容器大小而變化；

          2. 通過三個 可選的配置項來組織子元素相對於容器的寬和高。

     配置項介紹：

     1. flex：各個子元素的的flex配置項會相互作用來決定子元素在容器內的寬度。如子元素1的flex為1，而子元素2的flex為2，而容器寬度為90，那么子元素1的寬度就為30，而子元素2的寬度為60。

     2. align：設置各個子元素的水平方向的對齊，可選值有：

               top：默認值，頂對齊；

               middle：中心線對齊；

               strech：使各個子元素的高度為容器body的高度來對齊；

               strechmax：以最高的子元素的高度作為其他各個子元素的高度來對齊。

     3.pack：設置所有子元素組成的元素塊是緊靠容器的左、中、右中哪個位置，可選值有：

               start：默認值，靠容器的左邊；

               center：靠中間；

               end：靠容器的右邊。

     1配置項為子元素的配置項；2和3為layout屬性的配置項。

 

實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1', //this text will be displayed on the panel body

flex: 1

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: 'Panel 2', //this text will be displayed on the panel body

flex: 3

 

});

var hbox = Ext.create('Ext.window.Window', {

title: 'HBox Layout',

width: 300,

height:100,

layout: {

type: 'hbox',

align: 'stretch'

},

defaults: {

bodyStyle: 'padding:10px'

},

items: [panel1, panel2]

});

 

hbox.show(); 

結果：

 

3.2.5. VBox 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     VBox布局與HBox相似，不同的是它用於組織子元素在容器內部垂直方向的布局。

     特點：

          1. 容器子元素會隨容器大小而變化；

          2. 通過三個 可選的配置項來組織子元素相對於容器的寬和高。

     配置項介紹：

     1. flex：各個子元素的的flex配置項會相互作用來決定子元素在容器內的高度。如子元素1的flex為1，而子元素2的flex為2，而容器高度為90，那么子元素1的高度就為30，而子元素2的高度為60。

     2. align：設置各個子元素的垂直方向的對齊，可選值有：

               left：默認值，左對齊；

               center：中心線對齊；

               strech：使各個子元素的寬度為容器body的寬度來對齊；

               strechmax：以最寬的子元素的寬度作為其他各個子元素的寬度來對齊。

     3.pack：設置所有子元素組成的元素塊是緊靠容器的左、中、右中哪個位置，可選值有：

               start：默認值，靠容器的左邊；

               center：靠中間；

               end：靠容器的右邊。

     1配置項為子元素的配置項；2和3為layout屬性的配置項。

 

實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1',

flex: 2

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: 'Panel 2',

flex: 1

});

var vbox = Ext.create('Ext.window.Window', {

title: 'VBox Layout',

width: 82,

height: 300,

layout: {

type: 'vbox',

align: 'stretch'

},

defaults: {

bodyStyle: 'padding:15px'

},

items: [panel1, panel2]

});

 

vbox.show();

 

 

3.2.6.  Accordion 布局　　　　　　　　　　　　　　　　　　　　　　　　　　

     Accordion布局是VBox布局的子類。與VBox布局不同的是Accordion布局僅僅會展現其中一個子元素而其余子元素將被折疊起來。

     特點：

     1. 容器子元素會隨容器大小而變化；

     2. 僅僅會展現其中一個子元素而其余子元素將被折疊起來或僅僅展現部分子元素而其他元素被折疊。

 

     配置項介紹：

     1. multi：默認為false，true表示可以同時展現多個子元素；

     2. collapseFirst：默認為false，false表示expand/collapse按鈕在標題工具按鈕欄的最左邊，true表示在最后邊。（關於標題工具按鈕欄Ext.panel.Tool我們將在后面學習）

     3. animate：默認為true，false為執行expand/collapse操作時沒有動畫效果

     4. fill：默認為true，true表示expand的子元素高度將為整個容器剩余高度，false表示expand的子元素高度為自身的高度

     1、4為layout配置項的屬性，2、3為子元素的配置項。

     （譯者語：本人試了一下activeOnTop這一配置項，但未成功。）

實例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: '<b>Panel 1</b>'

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '<b>Panel 2</b>'

 

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '<b>Panel 3</b>'

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: '<b>Panel 4</b>'

});

var panel5 = Ext.create('Ext.panel.Panel', {

title: 'Panel 5',

html: '<b>Panel 5</b>'

});

var accordion = Ext.create('Ext.window.Window', {

title: 'Accordion Layout',

margins:'5 0 5 5',

split:true,

width: 210,

height:250,

layout:'accordion',

defaults: {

bodyStyle: 'padding:35 15 0 50'

},

items: [panel1, panel2, panel3, panel4, panel5]

 

accordion.show(); 

 

3.2.7. 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為子元素的配置項。

注意：子元素的排列次序為由左至右，由上到下。

實例：

var table = Ext.create('Ext.window.Window', {

title: 'Table Layout',

width: 250,

height: 200,

layout: {

type: 'table',

columns: 3,

tableAttrs: {

style: {

width: '100%',

height: '100%'

}

}

},

defaults: {

bodyStyle: 'padding:10px'

},

 

items:[{

html:'Cell 1',
rowspan: 3 //this cell will span 3 rows
},{
html:'Cell 2'
},{
html:'Cell 3'
},{
html:'Cell 4'
},{
html:'Cell 5'
},{
html:'Cell 6',
colspan: 2 //this cell will span 2 columns

},{

html:'Cell 7'

},{

html:'Cell 8'

},{

html:'Cell 9'

}]

});

table.show();  

     

 

3.2.8. Column 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Column布局為Auto布局的子類，用於設置子元素的寬度。

     特點：

     1. 容器子元素的寬度會隨容器寬度而變化；

     2. 容器子元素的高度不隨容器高度而變化；  

 

     配置項介紹：

     1. columnWidth：設置子元素的寬度（值必須為百分數或小於1的小數）

     1用作子元素的配置項。

實例：

var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: '.25',

columnWidth: .25 //means 25%

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '.25',

columnWidth: .25 //means 25%

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '1/2',

columnWidth: 1/2 //means 50%

});

var column = Ext.create('Ext.window.Window', {

title: 'Column Layout',

width: 400,

layout:'column',

defaults: {

height: 60,

bodyStyle: 'padding:10px'

},

items: [panel1, panel2, panel3]

});

 

column.show(); 

 

3.2.9. Fit 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Fit 布局是容器內只能顯示一個子元素，若設置多個子元素，則只顯示第一個子元素。

     特點：

          1. 容器內只能顯示一個子元素，若設置多個子元素，則只顯示第一個子元素。

          2. 容器子元素隨容器大小變化。

實例：

     var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',
bodyStyle: 'padding:15px',
html: 'Fit Content'
});
var fit = Ext.create('Ext.window.Window', {
title: 'Fit Layout',
width: 100,
height: 150,

layout:'fit',
items: [panel1]
});
fit.show();

 

3.2.10.Card 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Card布局是Fit布局的子類。

     特點：

     1. 容器內只能顯示一個子元素，若設置多個子元素，則只顯示第一個子元素；

     2. 可通過設置 setActiveItem方法來展示其他子元素；

     3. 容器子元素隨容器大小變化。

實例：

var card = Ext.create('Ext.window.Window', {
title: 'Card Layout',
width: 400,
height: 200,
layout: 'card',
activeItem: 0,
bodyStyle: 'padding:70 50 0 150',
defaults: {
border:false
},
bbar: [{
id: 'prevButton',
text: 'Preivous Step',
handler: navHandler,
disabled: true
},
'->',
{
id: 'nextButton',
text: 'Next Step',
handler: navHandler
}],
items: [{
html: '<p>Step 1 of 3</p>'
},{
html: '<p>Step 2 of 3</p>'
},{
html: '<p>Step 3 of 3</p>'
}]
});
card.show();

 

var navHandler = function(btn) {

var activeItem = card.layout.activeItem;

var active = card.items.indexOf(activeItem);

if (btn.id == 'nextButton') {

active += 1;

}

else if (btn.id == 'prevButton') {

active -= 1;

}

card.layout.setActiveItem(active);

var prev = card.dockedItems.items[1].items.items[0];

var next = card.dockedItems.items[1].items.items[2];

if (active == 0){

prev.setDisabled(true);

} else if (active == 1){

prev.setDisabled(false);

next.setDisabled(false);

} else if (active == 2){

next.setDisabled(true);

}};

 

3.2.11. Border布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Border布局將容器分為五個區域：north、south、east、west和center。如下圖：

其中north、south、east、west為選填項，center為必填項。另外我們不用設置center區域的高寬，瀏覽器可視工作區的高寬減去north、south、east和west高寬后剩余的空間便是center區域的高寬。

實例：

var border = Ext.create('Ext.window.Window', {
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
defaults:{
xtype: 'panel'
},
items: [{
title: 'North Region is resizable',
region: 'north',
height: 100,
split: true
},{
title: 'South Region is resizable',
region: 'south',
height: 100,
split: true
},{
title: 'West Region is collapsible',
region:'west',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
layout: 'fit'
}]
});
border.show();

 

3.2.12. Form布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     （譯者語：雖然原文中沒有該節內容，但API文檔有Ext.layout.container.Form類，為了知識的完整性，因此追加該內容）

     特點：

          1. 內部的子元素的寬度為容器body的寬度，並隨容器的大小變化而變化；

          2. 屬於Ext.form.field包下的內部子元素的padding屬性將失效。

 

3.3. Component布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Component布局負責組織組件內部的HTML元素。Toolbars、Headers和表單的Fields中均有應用到。（譯者語：Container布局用於組織組件之間的布局關系；Component布局負責組織組件內部的HTML元素或子組件的關系，組件內部由多個部分（HTML元素或子組件）組成，Extjs4中對於組件中的子組件的組織形式是可定制的，相當靈活。另外雖然可通過組件的componentLayout配置項配置Component布局，但一般情況下我們不應該設置該配置項）

 

3.3.1. Dock 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     為提高靈活性，Extjs4引進新的布局引擎Dock布局，主要應用在panel類組件上。該布局已在組件內部設置並用於panel的Headers和Toolbars中。

下面我們通過將Extjs3和Extjs4作對比來學習Dock布局。

Extjs3中設置Toolbar如下：

var html = '<div style="padding:10px;"><h1><center><span>Body</ center></h1></div>';

var panel1 = new Ext.Panel({

collapsible:true,

width:400,

renderTo: 'ext3-panel',

title: 'Ext 3 Panel - Header',

html: html,

tbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Top Toolbar'

}]

}),

bbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Bottom Toolbar'

}]

}),

fbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Footer Toolbar'

}]

})

}); 

上述代碼片段中我們創建了一個標題為 Ext 3 Panel - Header的Ext.Panel實例，其中包含Header（標題）和三個Toolbar（分別位於Ext.Panel實例的上、下、頁腳的位置），每個Toolbar有一個按鈕，結果如下：

下面我們來分析一下Extjs3的Ext.Panel實例所生成的代碼，最外層是一個用於封裝整個組件的元素（El），然后是panel自身的Header和body的封裝體。在body的封裝體內有是三個Toolbar和panel body，具體如下圖：

從上圖我們可以看到Extjs3中的Panel的Header和Toolbar在Panel內部的位置是固定的，不能作任何改變。

而Extjs4的Panel組件就不同了，我們先看一下從Extjs3遷移到Extjs4的實例吧：

var panel1 = Ext.create('Ext.panel.Panel', {
collapsible:true,
width:400,
renderTo: 'ext4-panel',
title: 'Ext 4 Panel - Header',
html: html,
tbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Top Toolbar'
}]
}),
bbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Bottom Toolbar'
}]
}),
fbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Footer Toolbar'
}]
})
});

與Extjs3的實例對比，我們可以發現除了用Ext.create代替new來實例化對象外，其他均沒有變化。那么究竟Extjs4的Header和Toolbar有多靈活呢，下面我們看一個完整的例子吧：

var panel2 = Ext.create('Ext.panel.Panel', {
collapsible:true,
width:400,
border:true,
renderTo: 'ext4-panel2',
title: 'Ext 4 Panel - Header',
headerPosition: 'top',
html: html,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Button - Top Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Button - Bottom Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'component',
flex: 1 //will occupy 100% of the width of the panel
},{
xtype: 'button',
text: 'Button - Footer Toolbar'
}]
}]
});
在Extjs4中Header已經獨立成為Panel下的一個子組件了，所屬類為Ext.panel.Header。我們可以設置Header的位置（top、bottom、left和right）

而Toolbar也通過dockedItems配置項可以設置到top、bottom、left和right位置，並且同一個位置可以有0到N個Toolbar。

下面是上述代碼片段所生成的元素結構圖：

（譯者語：原文中對Dock布局講解的其余部分均為設置headerPosition、dockedItems為不同的值時的效果描述，我想大家通過實踐就會得到結論，所以在此就不在翻譯了）

 

3.3.2. Tool布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     Extjs4中的Ext.panel.Header中包含Ext.panel.Tool的0到N個實例a。而這些Ext.panel.Tool實例就是通過Tool布局來組織其關系。（譯者語：in為在API文檔中沒有發現Tool布局，所以本節內容將以介紹Ext.panel.Tool為主）

     Ext框架提供25種類型的Ext.panel.Tool，通過Ext.panel.Panel的tools配置項來設置Ext.panel.Tool實例。要注意的一點是，Ext框架提供的Ext.panel.Tool僅包含按鈕圖標而具體的點擊事件處理函數需要我們自定義。具體實例如下：

var panel1 = Ext.create('Ext.panel.Panel', {
width:500,
renderTo: 'ext4-panel-tools',
html: html,
title: 'Tools - Header',
tools: [{
type: 'close',
handler: function(){} //some logic inside handler
},{
type: 'collapse',
handler: function(){} //some logic inside handler
},{
type: 'down',
handler: function(){} //some logic inside handler
},{
type: 'expand',
handler: function(){} //some logic inside handler
},{
type: 'gear',
handler: function(){} //some logic inside handler
},{
type: 'help',
handler: function(){} //some logic inside handler
},{
type: 'left',
handler: function(){} //some logic inside handler
},{
type: 'maximize',
handler: function(){} //some logic inside handler
},{
type: 'minimize',
handler: function(){} //some logic inside handler
},{
type: 'minus',
handler: function(){} //some logic inside handler
},{
type: 'next',
handler: function(){} //some logic inside handler
},{
type: 'pin',
handler: function(){} //some logic inside handler
},{
type: 'plus',
handler: function(){} //some logic inside handler
},{
type: 'prev',
handler: function(){} //some logic inside handler
},{
type: 'print',
handler: function(){} //some logic inside handler
},{
type: 'refresh',

itemId: "refresh",

hidden: true,
handler: function(){} //some logic inside handler
},{
type: 'restore',
handler: function(){} //some logic inside handler
},{
type: 'right',
handler: function(){} //some logic inside handler
},{
type: 'save',
handler: function(){} //some logic inside handler
},{

type: 'toggle',
handler: function(){} //some logic inside handler
},{
type: 'unpin',
handler: function(){} //some logic inside handler
},{
type: 'up',
handler: function(){} //some logic inside handler
},{

type: "search",

handler: function(event, target, owner, tool){
            // do search
            owner.child('#refresh').show();
        }

}]
});

 

3.3.3. Field布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     （譯者語：原文中指出Extjs4中已不支持FormLayout，而是通過FieldLayout來替代FormLayout。但API中仍然存在Ext.layout.container.Form，而且FormLayout屬於Container布局而FieldLayout屬於Component布局，兩者沒有互斥關系，因此下面的內容以介紹Field布局為主，並不討論它語Form布局的關系）

     下面我們先來看一下在Extjs3中是如何創建含兩個字段的表單吧：

     Ext.form.Field.prototype.msgTarget = 'side';

var simple = new Ext.FormPanel({

labelWidth: 75,

url:'save-form.php',

frame:true,

title: 'Form - Ext 3',

bodyStyle:'padding:5px 5px 0',

width: 350,

renderTo:'ext3-form',

defaults: {width: 230},

defaultType: 'textfield',

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false

},{

fieldLabel: 'Last Name',

name: 'last',

allowBlank:false

}

],

buttons: [{

      text: 'Save'

 },{

 

text: 'Cancel'
}]
});

上面的代碼片段中，我們創建了一個寬度為350px的表單，字段的標題寬度為75px，字段輸入框寬度為230px的兩個字段。字段不能為空，若為空則顯示錯誤提示信息。結果如下：

在Extjs3中我們需要為字段預留至少20px的空間來呈現錯誤提示信息圖標，否則當字段驗證失敗時將無法看到錯誤提示信息圖標。

下面我們看一下在Extjs4中的實現吧：

var simple = Ext.create('Ext.form.Panel', {

frame:true,

title: 'Form - Ext 4',

bodyStyle:'padding:5px 5px 0',

width: 350,

renderTo:'ext4-form',

fieldDefaults: {

msgTarget: 'side',

labelWidth: 75

},

      defaultType: 'textfield',  

      defaults: {

anchor: '100%'

},

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false

},{

fieldLabel: 'Last Name',

name: 'last',

allowBlank:false

}],

buttons: [{

text: 'Save'

},{

text: 'Cancel'

}]

 

}); 

在Extjs4上的實現與Extjs3的差不多，但我們已經不用為顯示錯誤提示信息圖標而預留至少20px的空間了，因為當字段驗證失敗時字段將縮短字段框的長度來顯示錯誤提示信息圖標。效果如下：

除了上述的改進外，現在我們可以為表單配置不同的布局，如HBox：

var hboxForm = Ext.create('Ext.form.Panel', {
frame:true,
title: 'Form - Ext 4',
bodyStyle:'padding:5px 5px 0',
width: 600,
renderTo:'ext4-form',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-10',
name: 'first',
allowBlank:false
}, {
xtype:'textfield',
fieldLabel: 'Phone Number',
anchor: '-10',
name: 'phone',
allowBlank:false
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last',
allowBlank:false
},{
Chapter 3
[ 137 ]
xtype:'textfield',
fieldLabel: 'Email',
anchor: '100%',
name: 'email',
vtype:'email'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

結果如下：

 

3.3.4. TriggerField布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     TriggerField布局是Field布局的擴展。Combox、DatePicker等組件都是用TriggerField布局，因此均不用預留至少20px的空間來顯示錯誤提示信息圖標。

     （譯者語：原文余下的內容為證明上述內容的Extjs3和Extjs4對比實例，在此忽略了）

 

3.4. 總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

     在本章我們學習了Container和Component布局。在學習Ext的時候我們可能會更關注組件的使用而忽視了布局的學習，但布局是否使用得當往往是影響UI呈現速度的主要因素，因此充分理解布局的內容是十分重要的。

轉載請標明出處哦！http://www.cnblogs.com/fsjohnhuang/archive/2013/02/19/2917233.html