EXTJS4自学手册——EXT容器布局(Fit,Card,Border)
来源:互联网 发布:下载贵金属分析软件 编辑:程序博客网 时间:2024/05/23 16:55
一、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>
执行结果:
- EXTJS4自学手册——EXT容器布局(Fit,Card,Border)
- EXTJS 3 EXT容器布局(Fit,Card,Border)
- EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)
- EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column)
- EXTJS4自学手册——EXT组件布局
- Ext布局--fit,border
- EXTJS4自学手册——EXT数据结构组件(store)
- Extjs4布局详解(一)—Fit布局
- EXTJS4自学手册——EXT对象选择
- EXTJS4自学手册——EXT基本方法、属性(onReady、define、create)
- EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor)
- EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require)
- EXTJS4自学手册——EXT数据结构组件(创建一个Model)
- EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互)
- EXTJS4自学手册——EXT数据结构组件(Model之间的关系)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理)
- Extjs4循序渐进(二)—Ext的界面(容器和布局)
- EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)
- ubuntu忘记root密码
- EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column)
- WINCE6.0显示驱动模型介绍
- Android使用JNI实现Java与C之间传递数据
- EXTJS4自学手册——EXT容器布局(Fit,Card,Border)
- 验证码工具分享-PHP识别工具SECURIMAGE
- 关于交换两个变量的不用第三个变量 异或的问题
- EXTJS4自学手册——EXT组件布局
- HTML符号
- property animation
- EXTJS4自学手册——页面控件(表格)
- EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理)
- 如何去除ecshop标题和网站底部的Powered by ECShop