只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局 
简单说明最常用到的6种布局方式：
一.最简单的布局：FitLayout
new Ext.Viewport({ layout:'fit', items:[oGrid] //oGrid是一个表格 });
注意：
1.使用Fit布局 items中只能有一个组件，如果你放置了多个组件，也只能是第一个用效。
2.使用Fit布局在组件中不能使用：autoHeight:true 否则会使FitLayout实效
二.最常用的布局：BorderLayout
注意：
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight，autoWidth
5.添加split:true属性可以控制区域大小
三.表单布局：FormLayout
注意：
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类，因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式，因此可以不显示写出Layout:'form'
3.fieldLabel，boxLabel在FormLayout布局情况下才能显示出来
四.列布局：ColumnLayout
new Ext.Viewport({ layout:'column', itmes:[{ title:'第一列', columnWidth:.3 //30% },{ title:'第二列', columnWidht:.3 //30% },{ title:'第三列', columnWidth:.4 //40% }] });
注意：
1.items的每个子组件中的columnWidth加起来的和必须为1
五.控制大小布局：AnchorLayout
六.伸缩折叠布局：Accordion
new Ext.Viewport({ layout:'border', items:[{ region:'west', width:200, layout:'accordion', //伸缩折叠布局 layoutConfig:{ titleCollapse:true, //单击标题可以折叠 animate:true, //展开折叠时的动画效果 activeOnTop:true,//展开的子面板的顺序总在最上面 }, items:[{ title:'第一栏', html:'one' },{ title:'第二栏', html:'two' },{ title:'第三栏', html:'three' },{ title:'第四栏', html:'four' }] },{ region:'center', split:true, border:true }] });
注意：
1.使用Accordion布局一定要设置标题：title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ； 
2012.3.12增加
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。
Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
另外还有3种布局方式,最开始没提到
- absolute
顾名思义，在容器内部，根据指定的坐标定位显示
- fit
一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
Ext.OnReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
});
- accordion
这个是最容易记的，手风琴效果
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:'paneldiv',
title:'容器组件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
});
- anchor
这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: "panel1",
height: 100,
anchor: '-50',
html: "高度等于100，宽度=容器宽度-50"
});
var panel2 = new Ext.Panel({
title: "panel2",
height: 100,
anchor: '50%',
html: "高度等于100,宽度=容器宽度的50%"
});
var panel3 = new Ext.Panel({
title: "panel3",
anchor: '-10, -250',
html: "宽度=容器宽度-10,高度=容器宽度-250"
});
var win = new Ext.Window({
title: "Anchor Layout",
height: 400,
width: 400,
plain: true,
layout: 'anchor',
items: [panel1, panel2,panel3]
});
win.show();
});
- card
像安装向导一样，一张一张显示
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}
if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}
if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}
card.getLayout().setActiveItem(i);
};
var card = new Ext.Panel({
width: 200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
items: [{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: "container"
});
});
- table
按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
Ext.onReady(function(){
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'table',
width:500,
height:200,
layoutConfig:{columns:3},//将父容器分成3列
items:[
{title:'元素1',html:'ssssssssss',rowspan:2,height:100},
{title:'元素2',html:'dfffsddsdfsdf',colspan:2},
{title:'元素3',html:'sdfsdfsdf'},
{title:'元素4',html:''}
]
}
);
});
- border
将容器分为五个区域:east,south,west,north,center
Ext.onReady(function() {
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true
}]
});
//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true,
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true,
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show(button);
});
});
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
