1)Ext.layout.container.Border
layout : 'border'表示我们使用了Border布局，这种布局方式称为边界布局，它将页面分隔成为:west,east,south,north,center这五个部分，我们在items里面使用region参数为它组织定义具体的位置。
north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。northsouth west east区域变大了，center区域就变小了。
参数 split:true 可以拖动除了center四个区域的大小。
参数 collapsible:true激活折叠功能，前面title必须设置，因为折叠按钮是出现标题部分
注意：center区域是必须使用的，而且center 区域不允许折叠。
Ext.create('Ext.panel.Panel',{
width:500,
height: 400,
layout: 'border',
items: [{
title: 'South Region isresizable',
region: 'south', //position for region
xtype: 'panel',
height: 100,
split: true, //enable resizing
margins: '0 5 5 5'
},{
//xtype: 'panel' implied by default
title: 'West Region iscollapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, //make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'east', //center region is required, no width/heightspecified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
2)Ext.layout.container.Fit
layout:'fit'表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。
注意：layout :'fit'组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。
Ext.define('ParentWindow',{
extend: 'Ext.window.Window',
title: 'ParentWindow',
width: '300px',
height: '200px',
layout: 'fit',
items: {
xtype: 'gridpanel',
store:store,
stateful: true,
layout : 'fit',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width :75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width :75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width :75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width :85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}]
}
});
3）Ext.layout.container.Accordion
layout: 'accordion'代表使用了accordion布局方式。
var accrodion= Ext.create('Ext.panel.Panel',{
layout:'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: true,
animate: true,
activeOnTop: false
},
items: [{
title: 'Panel 1',
html: 'Panel content!'
},{
title: 'Panel 2',
html: 'Panel content!'
},{
title: 'Panel 3',
html: 'Panel content!'
}],
});
4)Ext.layout.container.Card
layout : 'card'Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。
<</span>script type="text/javascript">
var navigate= function(panel,direction){
var layout= panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
}
var cardPanel= Ext.create('Ext.panel.Panel',{
layout: 'card',
activeItem:0, // make sure the active item is set on thecontainer config!
bodyStyle: 'padding:15px',
defaults: {
//applied to each contained panel
border: false
},
bbar: [{
id:'move-prev',
text: '上一章',
xtype: 'button',
listeners :{
'click' : function(btn){
navigate(btn.up('panel'),'prev');
}
}
},{
id:'move-next',
text: '下一章',
xtype: 'button',
listeners :{
'click' : function(btn){
navigate(btn.up('panel'),'next');
}
}
}],
items: [
{
id: 'card0',
html: '
Welcometo card0!
第一章：好好学习' },{
id: 'card1',
html: '
Welcometo card1!
第二章：天天向上' },{
id: 'card2',
html: '
Welcometo card2!
第三章：good good study' },{
id: 'card3',
html: '
Welcometo card3!
第四章：天天' },{
id: 'card4',
html: '
Welcometo card4!
第五章：顶顶顶' }
]
});
Ext.onReady(function(){
Ext.create('Ext.window.Window',{
title: 'CardLayoutWindow',
width: '300px',
height: '200px',
layout: 'fit',
items: cardPanel
}).show();
});
</</span>script>
5）Ext.layout.container.Anchor
layout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。
anchor: '75%20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。
anchor:'-300 -200'，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。
<</span>script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.Panel',{
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: '75%宽度 20%高度',
anchor: '75% 20%'
},{
xtype: 'panel',
title: 'Offset -300 Width & -200Height',
anchor: '-300 -200'
},{
xtype: 'panel',
title: 'Mixed Offset andPercent',
anchor: '-250 20%'
}]
});
});
</</span>script>
6)Ext.layout.container.Absolute
layout:'absolute'。我们可以对每一个控件的位置进行控制。
x:设置x坐标；y:设置y坐标
var alayout= Ext.create('Ext.form.Panel',{
width: 300,
height: 275,
layout:'absolute',
defaultType: 'textfield',
items: [{
x: 10,
y: 10,
xtype:'label',
text: 'Send To:'
},{
x: 80,
y: 10,
name: 'to',
anchor:'90%' //anchor width by percentage
},{
x: 10,
y: 40,
xtype:'label',
text: 'Subject:'
},{
x: 80,
y: 40,
name: 'subject',
anchor: '90%' //anchor width by percentage
},{
x:0,
y: 80,
xtype: 'textareafield',
name: 'msg',
anchor: '100% 100%' //anchor width and height
}]
});
7)Ext.layout.container.Column
layout:'column'：表格布局。
注意items中 columnWidth的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。
var columnLayout= Ext.create('Ext.panel.Panel',{
width: 350,
height: 250,
layout:'column',
items: [{
title: '表格Layout 1',
columnWidth: .25
},{
title: '表格Layout 2',
columnWidth: .55
},{
title: '表格Layout 3',
columnWidth: .20
}],
renderTo: Ext.getBody()
});
8)Ext.layout.container.Table
layout : 'table'表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的标签。
var tableLayout= Ext.create('Ext.panel.Panel',{
width:300,
height: 150,
layout: {
type: 'table',
columns: 3
},
defaults:{
//applied to each contained panel
bodyStyle:'padding:20px'
},
items:[{
html: 'A table',
rowspan: 2
},{
html: 'B table',
colspan: 2
},{
html: 'C table',
cellCls: 'highlight'
},{
html: 'D table'
}]
});
<<span>tbody>
<<span>tr>
<<span>td id="" class="x-table-layout-cell " colspan="1" rowspan="2">
<<span>div id="panel-1015" class="x-panelx-panel-default" role="presentation" style="height:57px; width: 78px;">
<<span>div id="ext-gen1025" class="x-panel-bodyx-panel-body-defaultx-panel-body-default" style="padding:20px; left: 0px; top: 0px;">Atable</<span>div>
</<span>div>
</<span>td>
<<span>td id="" class="x-table-layout-cell " colspan="2" rowspan="1">
<<span>div id="panel-1016" class="x-panelx-panel-default" role="presentation" style="height:57px; width: 162px;">
<<span>div id="ext-gen1029" class="x-panel-bodyx-panel-body-defaultx-panel-body-default" style="padding:20px; left: 0px; top: 0px;">Btable</<span>div>
</<span>div>
</<span>td>
</<span>tr>
<<span>tr>
<<span>td id="" class="x-table-layout-cellhighlight" colspan="1" rowspan="1">
<<span>div id="panel-1017" class="x-panelx-panel-default" role="presentation" style="height:57px; width: 81px;">
<<span>div id="ext-gen1033" class="x-panel-bodyx-panel-body-defaultx-panel-body-default" style="padding:20px; left: 0px; top: 0px;">Ctable</<span>div>
</<span>div>
</<span>td>
<<span>td id="" class="x-table-layout-cell " colspan="1" rowspan="1">
<<span>div id="panel-1018" class="x-panelx-panel-default" role="presentation" style="height:57px; width: 81px;">
<<span>div id="ext-gen1037" class="x-panel-bodyx-panel-body-defaultx-panel-body-default" style="padding:20px; left: 0px; top: 0px;">Dtable</<span>div>
</<span>div>
</<span>td>
</<span>tr>
</<span>tbody>
</<span>table>
9)Ext.layout.container.VBox 垂直布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
10)Ext.layout.container.HBox 水平布局
a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。
3、end：组件在容器的右边
