EXTJS 3 EXT容器布局(Fit,Card,Border)

由于工作转换,新东家使用extjs3座前台实现,特此记录之  此文转自:这里

一个不错的参考博客   ,  

一、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>
复制代码

执行结果:

EXTJS 3 EXT容器布局(Fit,Card,Border)_第1张图片

 

三、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>
复制代码

执行结果:

EXTJS 3 EXT容器布局(Fit,Card,Border)_第2张图片



你可能感兴趣的:(ExtJs3)