准備工作，布置一個最簡單的Form，共5個組件，都為textfield。
1 Ext.onReady(function(){ 2 Ext.create('Ext.form.Panel', { 3 width: 500, 4 title: 'Layout', 5 renderTo : 'form', 6 items: [{ 7 xtype : 'textfield', 8 fieldLabel : 'edit1', 9 name : 'edit1', 10 },{ 11 xtype : 'textfield', 12 fieldLabel : 'edit2', 13 name : 'edit1', 14 },{ 15 xtype : 'textfield', 16 fieldLabel : 'edit3', 17 name : 'edit1', 18 },{ 19 xtype : 'textfield', 20 fieldLabel : 'edit4', 21 name : 'edit1', 22 },{ 23 xtype : 'textfield', 24 fieldLabel : 'edit5', 25 name : 'edit1', 26 }], 27 buttons : [{ 28 text : 'upDate', 29 handler : function(){ 30 //do something... 31 } 32 }] 33 }); 34 })
效果：
1、Absolute絕對布局：
使用標准x,y屬性進行x/y坐標定位。
1 Ext.create('Ext.form.Panel', { 2 title: 'Absolute', 3 renderTo: 'absolute', 4 width: 500, 5 height: 250, 6 layout: 'absolute', 7 items: [{ 8 xtype : 'textfield', 9 fieldLabel : 'edit1', 10 width : 100, 11 name : 'edit1', 12 x : 10, 13 y : 10 14 },{ 15 xtype : 'textfield', 16 fieldLabel : 'edit2', 17 width : 160, 18 name : 'edit1', 19 x : 20, 20 y : 40 21 },{ 22 xtype : 'textfield', 23 fieldLabel : 'edit3', 24 width : 60, 25 name : 'edit1', 26 x : 30, 27 y : 70 28 },{ 29 xtype : 'textfield', 30 fieldLabel : 'edit4', 31 width : 190, 32 name : 'edit1', 33 x : 40, 34 y : 100 35 },{ 36 xtype : 'textfield', 37 fieldLabel : 'edit5', 38 width : 220, 39 name : 'edit1', 40 x : 50, 41 y : 130 42 }], 43 buttons : [{ 44 text : 'upDate', 45 handler : function() { 46 //do something... 47 } 48 }] 49 });
效果：
ps:在調試的時候遇到一個情況，如果僅設置寬width而不設置高height的話，會出現“Layout run failed ”錯誤。不過若是僅設置高而不設置寬，則Form寬填充整個頁面，而不會出現錯誤。
2、accordion手風琴式布局:
注意：只有 Ext的各種Panel和Ext.panel.Panel的子類可以用於這種布局的容器中.
諸如Header、Table、Tool等，子類有:
1 Ext.create('Ext.form.Panel', { 2 width: 500, 3 height: 250, 4 title: 'Accordion', 5 renderTo: 'accordion', 6 layout : 'accordion', 7 items: [{ 8 title: 'Panel1', 9 html: 'Panel content!' 10 },{ 11 itle: 'Panel2', 12 html: 'Panel content!' 13 },{ 14 title: 'Panel3', 15 html: 'Panel content!' 16 }], 17 buttons : [{ 18 text : 'open Panel3', 19 handler : function() { 20 Ext.getCmp('Panel3').expand(true); 21 } 22 }] 23 });
效果：
3、Anchor式布局：
根據父控件寬高，以固定百分比或者固定偏移量來決定子控件的尺寸。
1 Ext.create('Ext.form.Panel',{ 2 width: 500, 3 height: 400, 4 title: 'Anchor', 5 renderTo: 'anchor', 6 layout: 'anchor', 7 buttonAlign : 'center', 8 items: [{ 9 xtype: 'panel', 10 title: '75% Width and 20% Height', 11 anchor: '75% 20%' 12 },{ 13 xtype: 'panel', 14 title: 'Offset -300 Width and -200 Height', 15 anchor: '-300 -200' 16 },{ 17 xtype: 'panel', 18 title: 'Offset -200 Width and 40% Height', 19 anchor: '-250 40%' 20 }], 21 buttons : [{ 22 text : 'upDate', 23 handler : function() { 24 //do something.. 25 } 26 }] 27 });
效果：
4、Auto布局:
1 Ext.create('Ext.form.Panel',{ 2 width: 500, 3 height: 400, 4 title: 'Auto', 5 renderTo: 'auto', 6 layout: 'auto', 7 buttonAlign : 'center', 8 margin: '50 150 50 50', 9 border: true, 10 items: [{ 11 type: 'panel', 12 title: 'AutoLayout1', 13 margin: '10 10 10 10', 14 border: true, 15 },{ 16 xtype: 'panel', 17 title: 'AutoLayout2', 18 border: true, 19 margin: '10 10 10 10' 20 }], 21 buttons : [{ 22 text : 'upDate', 23 handler : function() { 24 //do something.. 25 } 26 }] 27 });
效果：
一些常用配置與問題：
1、border 邊框設置
默認為false,邊框不可見。true為邊框可見。
2、margin 組件頁邊
margin 可以是一個數值適用於所有邊 或者它可以是每個樣式的CSS樣式規范, 例如: '10 5 3 10'。
3、buttonAlign 按鈕Button位置
指定Panel中按鈕的位置。可配置的值有'right', 'left' 和 'center'(對於所有的buttons/fbar默認為'right'，對於toolbar 則默認為'left')。
4、handler : function(){}
按鈕點擊事件的觸發。
5、關於標簽fieldLabel與title
title為要現實的標簽文本。
fieldLabel為域標簽。它被附加了labelSeparator， 其位置和大小被labelAlign、 labelWidth和labelPad配置確認。
labelSeparator: 插入到fieldLabel后面的字符。默認為":"
labelAlign: 控制fieldLabel的位置和對齊方式。有效值為:
"left" (默認) - 標簽位於域的左邊，其文本左對齊。其寬度由labelWidth配置確定。
"top" - 標簽位於域的頂端。
"right" - 標簽位於域的右邊，其文本右對齊。其寬度由labelWidth配置確定。
labelWidth: fieldLabel以像素為單位的寬度。只適用於 labelAlign設置了“left”或“right”。默認為"100"。
labelPad: fieldLabel和輸入域之間的像素空間的合計。默認為"5"。