Extjs的布局控件--border布局

布局控件
所谓的布局就是指容器组件中子元素的分布,排列组合方式.Ext的所有容器组件都支持布局操作.
每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列,组合以及渲染方式
ExtJS的布局基类为 Ext.layout.ContainerLayout,其他的布局都是继承该类.ExtJS的容器组件包含一个layout及layoutConfig配置属性.
这两个属性用来指定容器使用的布局及不急的详细配置信息.如果没有指定容器组件的layout,则会默认使用ContainerLayout 作为布局.
该布局只是简单的将元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置

//让面板以横排的方式排列 columnWidth 是设置面板占总面板宽度的比例

var panel3 = new Ext.Panel({
renderTo:Ext.getBody(),
width:400,
height:200,
layout:'column',
items:[{
columnWidth:0.5,
title:'面板1',
html:'你好吗?'
},{
columnWidth:0.5,
title:'面板2',
html:'我很好,谢谢'

}]

}

);

border布局由类Ext.layout.BorderLayout 定义,布局名称为border.该布局把容器分成东南西北中五个区域,分别由 east , south,west,north
和center来表示.在容器中添加子元素的时候,我们自选哟自定这些子元素所在的位置,border布局会自动把子元素放到布局指定的位置

var viewport = new Ext.Viewport({
layout:'border',
renderTo:Ext.getBody(),
items:[{
title:'north',
region:'north',
split:true,
border:true,
collapsible:true,
height:100,
minSize:100,
maxSize:120
},{
title:'south',
region:'south',
split:true,
border:true,
collapsible:true,
height:100,
minSize:100,
maxSize:120
},{
title:'east',
region:'east',
split:true,
border:true,
collapsible:true,
width:100,
minSize:100,
maxSize:200
},{
title:'west',
region:'west',
split:true,
border:true,
collapsible:true,
width:100,
minSize:100,
maxSize:200

},{
title:'center',
region:'center',
split:true,
border:true,
collapsible:true,
widht:300

}]
});