佈局Layout
佈局就是指容器組件中子元素的分佈，排列組合方式，Ext的所有容器組件都支持佈局操作，每一個容器都會有一個對象的佈局，佈局負責管理組件中子元素的排列、組合及渲染方式等
舉例說明：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
width:300,
height:200,
layout:'column',
items:[
{
columnWidth:0.5,
title:'面板1'
},
{
columnWidth:0.5,
title:'面板2'
}
]
});
});
以上的代碼我們創建了一個面板，Panel是一個容器的組件，我們使用layout指定該面板使用Culumn的佈局，該面板的子元素是兩個面板，這兩個面板都包含了一個與列布局相關的配置參數columnWidth，他們的值都是0.5，就是說每個面板佔了一半的寬度
第一: border區域佈局類
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",{
layout:'border',
items:[
{
region:'north',
height:50,
title:'頂部面板'
},
{
region:'south',
height:50,
title:'底部面板'
},
{
region:'center',
title:'中間面板'
},
{
region:'west',
width:100,
collapsible:true,//加效果，當點擊左邊面板的那個<<按鈕時，可以縮
title:'左邊面板'
},
{
region:'east',
width:100,
title:'右邊面板'
}
]
});
});
第二 column類的佈局
列布局將整個容器組件看成一列，然後往裏面放入元素的時候，可以通過在子元素中指定使用column width或width來指定子元素所佔的列寬度，columnwidth表示使用的是百分百比的形式指定列寬度，width表示使用絕對像素指定列寬度，在實際應用中，可以混合使用兩種形式
舉例：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
title:'使用columnLayout佈局',
layout:'column',
width:500,
height:100,
items:[
{title:'列1',width:200},
{title:'列2',columnWidth:0.3},
{title:'列3',columnWidth:0.3},
{title:'列4',columnWidth:0.4},
]
});
});
第三fit佈局
常用於嵌套佈局時使之自適應容器大小，即會佈滿整個容器，如果容器內有多個子元素，則只會顯示一個子元素。通常用於菜單、表單等的嵌套佈局
舉例：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
title:'容器組件',
layout:'fit',
width:400,
height:100,
items:[
{title:'子元素1',html:'這是子元素1的內容'},
{title:'子元素2',html:'這是子元素2的內容'},
]
});
});
效果爲：
第四 form佈局
Form佈局是一種專門用於管理表單中字段的不僅，這種佈局主要用於在程序中創建表單字段或表單元素等使用
舉例：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
title:'容器組件',
width:300,
layout:'form',
hideLabels:false,
labelAlign:'right',
height:120,
defaultType:'textfield',
items:[
{filedLabel:'請輸入姓名',name:'name'},
{filedLabel:'請輸入地址',name:'address'},
{filedLabel:'請輸入電話',name:'tel'}
]
});
});
第五 accordion佈局
表示可摺疊的佈局，也就是說是說使用該佈局容器組件中的子元素時可以摺疊的形式
舉例：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
title:'容器組件',
width:500,
height:200,
layout:'accordion',
layoutConfig:
{animate:true},
items:[
{title:'子元素1',html:'這是子元素1的內容'},
{title:'子元素2',html:'這是子元素2的內容'},
{title:'子元素3',html:'這是子元素3的內容'},
]
});
});
第六 table佈局
該佈局負責把容器中的子元素按照類似普通html標籤來進行佈局
舉例：
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
renderTo:'pan',
title:'容器組件',
width:500,
height:200,
layout:'table',
layoutConfig:{columns:3},
items:[
{title:'子元素1',html:'這是子元素1的內容',rowspan:2,height:100}, //跟框架差不多，分爲兩列
{title:'子元素2',html:'這是子元素2的內容',colspan:2,}, //另一列爲兩行
{title:'子元素3',html:'這是子元素3的內容'},
{title:'子元素4',html:'這是子元素4的內容'}
]
});
});