几种Panel和Container layout 属性布局

Border： 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置 代码：
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
}

Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器
组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}]

再看使用Fit 布局后的代码 使用Fit 布局，因此子将自动填满整个父容器 果容器组件中有多个子元素，则只会显示一个元素
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"}
] }

Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用面板使用Form 布局，面板中包含三个子元素，这些子元素都是文本框字段，在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐藏标签、标签对齐方式等
可以在容器组件中把hideLabels 设置为true，这样将不会显示容器中字段的标签了
Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel
还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"请输入姓名",name:"name"},
{fieldLabel:"请输入地址",name:"address"},
{fieldLabel:"请输入电话",name:"tel"}
] });});

Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式
点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展
开的面板
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
] });});

 

Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元
素按照类似普通html 标签上面的代码创建了一个父容器组件，指定使用Table 布局，layoutConfig 使用columns
指定父容器分成3 列，子元素中使用rowspan 或colspan 来指定子元素所横跨的单元格数。
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
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中的内容"}
] });});

了前面介绍的几种布局以外， Ext2.0 中还包含其它的Ext.layout.AbsoluteLayout、
Ext.layout.AnchorLayout 等布局类，这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10 种布局类的一种，来实现自定义的布局。

 

转载于:https://www.cnblogs.com/waitone/archive/2013/02/01/waitones.html