EXTJS4自学手册——EXT容器布局（Fit,Card,Border）

一、Fit布局

说明：容器内的组件占满整个容器

例子：

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{

title:'panel1',
html:'columnWidth:.28'
});

//将3个panel放在一个弹出层中
var w =    Ext.create('Ext.window.Window',{
width:200,
height:200,
title:'fit布局',
layout:'fit',
items:[panel1]
});
w.show();
});
</script>

执行结果：



二、Card布局

说明：多个组件重叠排列，一次只有一个组件显示，占满整个容器。

例子：

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){
//切换panel方法
var changePanel = function(button){
//获取当前展示的panel
var activeItem = w.layout.activeItem;
//当前展示的panel是第几个
var active = w.items.indexOf(activeItem);
//如果按下的是上一张按钮
if(button.id=="preButton"){
active-=1;//索引减一
Ext.getCmp('nextButton').setDisabled(false);//启用下一张按钮
}else{
active+=1;//索引加一
Ext.getCmp('preButton').setDisabled(false);//启用上一张按钮
}
w.layout.setActiveItem(active);//将索引为active的panel展示出来，其他的panel隐藏

if(active==0){
Ext.getCmp('preButton').setDisabled(true);//如果是第一张，第一张按钮不可用
}
if(active==2){
Ext.getCmp('nextButton').setDisabled(true);//如果是最后一张，下一张按钮不可用
}

}

//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{

title:'panel1',
html:'panel1'
});
var panel2 = Ext.create('Ext.panel.Panel',{

title:'panel2',
html:'panel2'
});
var panel3 = Ext.create('Ext.panel.Panel',{

title:'panel3',
html:'panel3'
});
//将3个panel放在一个弹出层中
var w =    Ext.create('Ext.window.Window',{
width:200,
height:200,
title:'card布局',
layout:'card',
//要包含的组件
items:[panel1,panel2,panel3],
//定义按钮
bbar:[{
id:'preButton',
text:'上一张',
//单击按钮时触发的方法
handler:changePanel,
disabled:true
},'->',{
id:'nextButton',
text:'下一张',
//单击按钮时触发的方法
handler:changePanel
}]
});
w.show();
});
</script>

执行结果：



三、Border布局

说明：将容器分为上下左右中5个区域，其中中间区域的组件必须有，其他区域可有可无

例子：

<script type="text/javascript">
<!--在页面加载完成后调用JS代码-->
Ext.onReady(function(){

//定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
//方位：北
region:'north',
title:'panel1',
height:30,
html:'north'
});
var panel2 = Ext.create('Ext.panel.Panel',{
//方位：中
region:'center',
title:'panel2',
html:'center'
});
var panel3 = Ext.create('Ext.panel.Panel',{
//方位：南
region:'south',
height:40,
title:'panel3',
html:'south'
});
var panel4 = Ext.create('Ext.panel.Panel',{
//方位：东
region:'east',
width:50,
title:'panel3',
html:'east'
});
var panel5 = Ext.create('Ext.panel.Panel',{
//方位：西
region:'west',
width:100,
title:'panel3',
html:'west'
});

var w =    Ext.create('Ext.window.Window',{
width:400,
height:400,
title:'border布局',
layout:'border',
//要包含的组件
items:[panel1,panel2,panel3,panel4,panel5]
});
w.show();
});
</script>

执行结果：