Extjs4布局layout


1.Layouts

1)Ext.layout.container.Border
layout : 'border' 表示我们使用了Border布局，这种布局方式称为边界布局，它将页面分隔成为:west,east,south,north,center这五个部分，我们在items里面使用region参数为它组织定义具体的位置。
north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大了，center区域就变小了。
参数 split:true 可以拖动除了center四个区域的大小。
参数 collapsible:true 激活折叠功能，前面title必须设置，因为折叠按钮是出现标题部分
注意：center 区域是必须使用的，而且center 区域不允许折叠。
Ext.create('Ext.panel.Panel',
{
[align=left] width: 500,[/align]
[align=left] height: 400,[/align]
[align=left] layout: 'border',[/align]
[align=left] items: [{[/align]
[align=left] title: 'South Region is resizable',[/align]
region: 'south', //
position for region
[align=left] xtype: 'panel',[/align]
[align=left] height: 100,[/align]
split: true, //
enable resizing
[align=left] margins: '0 5 5 5'[/align]
[align=left] },{[/align]
[align=left] // xtype: 'panel' implied by default[/align]
[align=left] title: 'West Region is collapsible',[/align]
[align=left] region:'west',[/align]
[align=left] xtype: 'panel',[/align]
[align=left] margins: '5 0 0 5',[/align]
[align=left] width: 200,[/align]
collapsible: true, //
make collapsible
[align=left] id: 'west-region-container',[/align]
[align=left] layout: 'fit'[/align]
[align=left] },{[/align]
[align=left] title: 'Center Region',[/align]
region: 'east', //
center region is required, no width/height specified
[align=left] xtype: 'panel',[/align]
[align=left] layout: 'fit',[/align]
[align=left] margins: '5 5 0 0'[/align]
[align=left] }],[/align]
[align=left] renderTo: Ext.getBody()[/align]
[align=left] });[/align]

2)Ext.layout.container.Fit
layout:'fit' 表示我们引用了fit布局。当客户要求一个窗口里显示一个Grid表格，可以让它自动适应窗体的大小的变化，窗体变大时候Grid表格也变大，窗体变小的时候也变小。
注意：layout : 'fit' 组件的items只能放一个组件，如果放了多个组件，那么也只有一个子组件会起作用。
[align=left]Ext.define('ParentWindow',{[/align]
[align=left] extend : 'Ext.window.Window',[/align]
[align=left] title : 'ParentWindow',[/align]
[align=left] width : '300px',[/align]
[align=left] height : '200px',[/align]
[align=left] layout : 'fit',[/align]
[align=left] items : {[/align]
[align=left] xtype : 'gridpanel',[/align]
[align=left] store: store,[/align]
[align=left] stateful: true,[/align]
[align=left] layout : 'fit',[/align]
[align=left] columns: [[/align]
[align=left] {[/align]
[align=left] text : 'Company',[/align]
[align=left] flex : 1,[/align]
[align=left] sortable : false,[/align]
[align=left] dataIndex: 'company'[/align]
[align=left] },[/align]
[align=left] {[/align]
[align=left] text : 'Price',[/align]
[align=left] width : 75,[/align]
[align=left] sortable : true,[/align]
[align=left] renderer : 'usMoney',[/align]
[align=left] dataIndex: 'price'[/align]
[align=left] },[/align]
[align=left] {[/align]
[align=left] text : 'Change',[/align]
[align=left] width : 75,[/align]
[align=left] sortable : true,[/align]
[align=left] dataIndex: 'change'[/align]
[align=left] },[/align]
[align=left] {[/align]
[align=left] text : '% Change',[/align]
[align=left] width : 75,[/align]
[align=left] sortable : true,[/align]
[align=left] [/align]
[align=left] dataIndex: 'pctChange'[/align]
[align=left] },[/align]
[align=left] {[/align]
[align=left] text : 'Last Updated',[/align]
[align=left] width : 85,[/align]
[align=left] sortable : true,[/align]
[align=left] renderer : Ext.util.Format.dateRenderer('m/d/Y'),[/align]
[align=left] dataIndex: 'lastChange'[/align]
[align=left] }][/align]
[align=left] }[/align]
[align=left] });[/align]

3）Ext.layout.container.Accordion
layout : 'accordion' 代表使用了accordion布局方式。
var accrodion = Ext.create('Ext.panel.Panel',
{
[align=left] [/align]
[align=left] layout:'accordion',[/align]
[align=left] defaults: {[/align]
[align=left] bodyStyle: 'padding:15px'[/align]
[align=left] },[/align]
[align=left] layoutConfig: {[/align]
[align=left] titleCollapse: true,[/align]
[align=left] animate: true,[/align]
[align=left] activeOnTop: false[/align]
[align=left] },[/align]
[align=left] items: [{[/align]
[align=left] title: 'Panel 1',[/align]
[align=left] html: 'Panel content!'[/align]
[align=left] },{[/align]
[align=left] title: 'Panel 2',[/align]
[align=left] html: 'Panel content!'[/align]
[align=left] },{[/align]
[align=left] title: 'Panel 3',[/align]
[align=left] html: 'Panel content!'[/align]
[align=left] }],[/align]
[align=left] [/align]

[align=left] });[/align]

[align=left]4)Ext.layout.container.Card[/align]
[align=left] layout : 'card' Card布局可以看做是一叠卡片，从上面看起来就像是一张卡片，我们可以把中间的卡片抽出来，放到最上面，可是每次只能显示一张卡片。[/align]

[align=left]<script type="text/javascript">[/align]
var navigate
= function(panel,direction){
var layout
= panel.getLayout();
[align=left] layout[direction]();[/align]
[align=left] Ext.getCmp('move-prev').setDisabled(!layout.getPrev());[/align]
[align=left] Ext.getCmp('move-next').setDisabled(!layout.getNext());[/align]
[align=left] }[/align]
var cardPanel
= Ext.create('Ext.panel.Panel',{
[align=left] layout: 'card',[/align]
activeItem: 0, // make sure the active item is set on the container
config!
[align=left] bodyStyle: 'padding:15px',[/align]
[align=left] defaults: {[/align]
[align=left] // applied to each contained panel[/align]
[align=left] border: false[/align]
[align=left] },[/align]
[align=left] bbar : [{[/align]
[align=left] id:'move-prev',[/align]
[align=left] text : '上一章',[/align]
[align=left] xtype : 'button',[/align]
[align=left] listeners : {[/align]
[align=left] 'click' : function(btn){[/align]
[align=left] navigate(btn.up('panel'),'prev');[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] },{[/align]
[align=left] id:'move-next',[/align]
[align=left] text : '下一章',[/align]
[align=left] xtype : 'button',[/align]
[align=left] listeners : {[/align]
[align=left] 'click' : function(btn){[/align]
[align=left] navigate(btn.up('panel'),'next');[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] }],[/align]
[align=left] items : [[/align]
[align=left] {[/align]
[align=left] id : 'card0',[/align]
[align=left] html : '<h1>Welcome to card0!</h1>第一章：好好学习'[/align]
[align=left] },{[/align]
[align=left] id : 'card1',[/align]
[align=left] html : '<h1>Welcome to card1!</h1>第二章：天天向上'[/align]
[align=left] },{[/align]
[align=left] id : 'card2',[/align]
[align=left] html : '<h1>Welcome to card2!</h1>第三章：good good study'[/align]
[align=left] },{[/align]
[align=left] id : 'card3',[/align]
[align=left] html : '<h1>Welcome to card3!</h1>第四章：天天'[/align]
[align=left] },{[/align]
[align=left] id : 'card4',[/align]
[align=left] html : '<h1>Welcome to card4!</h1>第五章：顶顶顶'[/align]
[align=left] }[/align]
[align=left] ][/align]
[align=left] });[/align]
[align=left] Ext.onReady(function(){[/align]
[align=left] Ext.create('Ext.window.Window',{[/align]
[align=left] title : 'CardLayoutWindow',[/align]
[align=left] width : '300px',[/align]
[align=left] height : '200px',[/align]
[align=left] layout : 'fit',[/align]
[align=left] items : cardPanel[/align]
[align=left] }).show();[/align]
[align=left] });[/align]
[align=left]</script>[/align]

[align=left]5）Ext.layout.container.Anchor[/align]
[align=left] layout:'anchor'设置为anchor布局模式。在每一个panel中的items中有一个参数anchor，参数是一个字符串。[/align]
[align=left] anchor: '75% 20%'，中间用一个空格隔开，空格前后是%的数字。第一个参数75%：意思是宽度设置为整体的75%；第二个参数20%：是设置高度为整体的20%。[/align]
[align=left] anchor:'-300 -200' ，中间用一个空格隔开，空格前后是整数，第一个参数-300：表示距离右侧的相对距离；第二个参数-200：表示距离底部的相对距离。[/align]
[align=left] <script type="text/javascript">[/align]
[align=left] Ext.onReady(function(){[/align]
Ext.create('Ext.Panel',
{
[align=left] width: 500,[/align]
[align=left] height: 400,[/align]
[align=left] title: "AnchorLayout Panel",[/align]
[align=left] layout: 'anchor',[/align]
[align=left] renderTo: Ext.getBody(),[/align]
[align=left] items: [{[/align]
[align=left] xtype: 'panel',[/align]
[align=left] title: '75%宽度 20%高度',[/align]
[align=left] anchor: '75% 20%'[/align]
[align=left] },{[/align]
[align=left] xtype: 'panel',[/align]
[align=left] title: 'Offset -300 Width & -200 Height',[/align]
[align=left] anchor: '-300 -200' [/align]
[align=left] },{[/align]
[align=left] xtype: 'panel',[/align]
[align=left] title: 'Mixed Offset and Percent',[/align]
[align=left] anchor: '-250 20%'[/align]
[align=left] }][/align]
[align=left] });[/align]
[align=left] });[/align]
[align=left]</script>[/align]

[align=left]6)Ext.layout.container.Absolute[/align]
[align=left] layout:'absolute'。我们可以对每一个控件的位置进行控制。[/align]
[align=left] x:设置x坐标；y:设置y坐标[/align]

var alayout
= Ext.create('Ext.form.Panel', {
[align=left] width: 300,[/align]
[align=left] height: 275,[/align]
[align=left] layout:'absolute',[/align]
[align=left] [/align]
[align=left] defaultType: 'textfield',[/align]
[align=left] items: [{[/align]
[align=left] x: 10,[/align]
[align=left] y: 10,[/align]
[align=left] xtype:'label',[/align]
[align=left] text: 'Send To:'[/align]
[align=left] },{[/align]
[align=left] x: 80,[/align]
[align=left] y: 10,[/align]
[align=left] name: 'to',[/align]
anchor:'90%' //
anchor width by percentage
[align=left] },{[/align]
[align=left] x: 10,[/align]
[align=left] y: 40,[/align]
[align=left] xtype:'label',[/align]
[align=left] text: 'Subject:'[/align]
[align=left] },{[/align]
[align=left] x: 80,[/align]
[align=left] y: 40,[/align]
[align=left] name: 'subject',[/align]
anchor: '90%' //
anchor width by percentage
[align=left] },{[/align]
[align=left] x:0,[/align]
[align=left] y: 80,[/align]
[align=left] xtype: 'textareafield',[/align]
[align=left] name: 'msg',[/align]
anchor: '100% 100%' //
anchor width and height
[align=left] }][/align]
[align=left] [/align]
[align=left] });[/align]

[align=left]7)Ext.layout.container.Column[/align]
[align=left] layout:'column'：表格布局。[/align]
[align=left] 注意items 中 columnWidth 的数值必须是0~1之间的小数，它表示每个子组件在整体中所占的百分比。它们的总和应该是1，否则会出现没有填满的情况。[/align]
var columnLayout
= Ext.create('Ext.panel.Panel', {
[align=left] width: 350,[/align]
[align=left] height: 250,[/align]
[align=left] layout:'column',[/align]
[align=left] items: [{[/align]
[align=left] title: '表格Layout 1',[/align]
[align=left] columnWidth: .25[/align]
[align=left] },{[/align]
[align=left] title: '表格Layout 2',[/align]
[align=left] columnWidth: .55[/align]
[align=left] },{[/align]
[align=left] title: '表格Layout 3',[/align]
[align=left] columnWidth: .20[/align]
[align=left] }],[/align]
[align=left] renderTo: Ext.getBody()[/align]
[align=left] });[/align]

[align=left]8)Ext.layout.container.Table[/align]
[align=left] layout : 'table' 表格布局。table布局把页面定义成一个表格包括行和列。它在生成代码的时候就是生成了html代码中的<table></table>标签。[/align]

var tableLayout
= Ext.create('Ext.panel.Panel',{
[align=left] width: 300,[/align]
[align=left] height: 150,[/align]
[align=left] layout : {[/align]
[align=left] type : 'table',[/align]
[align=left] columns : 3[/align]
[align=left] },[/align]
[align=left] defaults: {[/align]
[align=left] // applied to each contained panel[/align]
[align=left] bodyStyle:'padding:20px'[/align]
[align=left] },[/align]
[align=left] items: [{[/align]
[align=left] html: 'A table',[/align]
[align=left] rowspan: 2[/align]
[align=left] },{[/align]
[align=left] html: 'B table',[/align]
[align=left] colspan: 2[/align]
[align=left] },{[/align]
[align=left] html: 'C table',[/align]
[align=left] cellCls: 'highlight'[/align]
[align=left] },{[/align]
[align=left] html: 'D table'[/align]
[align=left] }][/align]

[align=left] });[/align]

<tbody>
<tr>
<td id="" class="x-table-layout-cell " colspan="1" rowspan="2">
<div id="panel-1015" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 78px;">
<div id="ext-gen1025" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">A table</div>
</div>
</td>
<td id="" class="x-table-layout-cell " colspan="2" rowspan="1">
<div id="panel-1016" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 162px;">
<div id="ext-gen1029" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">B table</div>
</div>
</td>
</tr>
<tr>
<td id="" class="x-table-layout-cell highlight" colspan="1" rowspan="1">
<div id="panel-1017" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 81px;">
<div id="ext-gen1033" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">C table</div>
</div>
</td>
<td id="" class="x-table-layout-cell " colspan="1" rowspan="1">
<div id="panel-1018" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 81px;">
<div id="ext-gen1037" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">D table</div>
</div>
</td>
</tr>
</tbody>
</table>

9)Ext.layout.container.VBox 垂直布局

a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

1、left（默认）：排列于容器左侧。

2、center ：控件在容器水平居中。

3、stretch：控件横向拉伸至容器大小

4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。

b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。

1、start（默认）：组件在容器上边

2、center：组件在容器中间

3、end：组件在容器的下边

10)Ext.layout.container.HBox 水平布局

a)align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

1、top（默认）：排列于容器顶端。

2、middle：垂直居中排列于容器中。

3、stretch：垂直排列且拉伸义填补容器高度

4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。

b)pack : 字符类型，指示组件在容器的位置，有如下几种属性。

1、start（默认）：组件在容器左边

2、center：组件在容器中间

3、end：组件在容器的右边