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的内容'}
]
});
});