extjs4.0的布局Layout

布局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的内容'}

]

});

});