Panel 页面布局篇
布局篇
1.panel accordion 布局
var panel = new Ext.Panel({
layout : 'accordion',
layoutConfig : {
activeOnTop : true,//设置打开的子面板置顶
fill : true,//子面板充满父面板的剩余空间
hideCollapseTool: false,//显示“展开收缩”按钮
titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板
animate:true//使用动画效果
},
title:'Ext.layout.Accordion布局示例',
frame:true,//渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [
{
title : '嵌套面板一',
html : '说明一'
},
{
title : '嵌套面板二',
html : '说明二'
}
,
{
title : '嵌套面板三',
html : '说明三'
}
]
})
2.panel cardLayOut 布局
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0,//设置默认显示第一个子面板
title:'Ext.layout.CardLayout布局示例',
frame:true,//渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [
{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},
{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
}
,
{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}
],
buttons:[
{
text : '上一页',
handler : changePage
},
{
text : '下一页',
handler : changePage
}
]
})
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
3.layout.AnchorLayout布局panel
var panel = new Ext.Panel({
layout : 'anchor',
title:'Ext.layout.AnchorLayout布局示例',
frame:false,//渲染面板
height : 150,
width : 300,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [
{
anchor : '50% 50%',//设置子面板的宽高为父面板的50%
title : '子面板'
}
]
})
或者：
items: [
{
anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素
title : '子面板'
}
]
或者：
items: [
{
anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
width : 200,
height : 100,
title : '子面板'
}
]
或者：
items: [
{
x : '10%',//横坐标为距父容器宽度10%的位置
y : 10,//纵坐标为距父容器上边缘10像素的位置
width : 100,
height : 50,
title : '子面板一'
},
{
x : 90,//横坐标为距父容器左边缘90像素的位置
y : 70,//纵坐标为距父容器上边缘70像素的位置
width : 100,
height : 50,
title : '子面板二'
}
]
4.FormLayout布局panel
var panel = new Ext.Panel({
title:'Ext.layout.FormLayout布局示例',
layout : 'form',
labelSeparator : '：',//在容器中指定分隔符
frame:true,//渲染面板
height : 110,
width : 300,
applyTo :'panel',
defaultType: 'textfield',//指定容器子元素默认的xtype类型为textfield
defaults : {//设置默认属性
msgTarget: 'side'//指定默认的错误信息提示方式
},
items: [
{
fieldLabel:'用户名',
allowBlank : false
},
{
fieldLabel:'密码',
allowBlank : false
}
]
})
5.ColumnLayout布局panel
var panel = new Ext.Panel({
title:'Ext.layout.ColumnLayout布局示例',
layout : 'column',
frame:true,//渲染面板
height : 150,
width : 250,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
frame : true
},
items: [{
title:'子面板一',
width:100,//指定列宽为100像素
height : 100
},
{
title:'子面板二',
width:100,//指定列宽为100像素
height : 100
}
]
})
或者：
items: [
{
title:'子面板一',
columnWidth:.3,//指定列宽为容器宽度的30%
height : 100
},
{
title:'子面板二',
columnWidth:.7,//指定列宽为容器宽度的70%
height : 100
}
]
或者：
items: [
{
title:'子面板一',
width : 100,//指定列宽为100像素
height : 100
},
{
title:'子面板二',
width : 100,
columnWidth:.3,//指定列宽为容器剩余宽度的30%
height : 100
},
{
title:'子面板三',
columnWidth:.7,//指定列宽为容器剩余宽度的70%
height : 100
}
]
6.layout.TableLayout布局panel
var panel = new Ext.Panel({
title:'Ext.layout.TableLayout布局示例',
layout : 'table',
layoutConfig : {
columns : 4 //设置表格布局默认列数为4列
},
frame:true,//渲染面板
height : 150,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
frame : true,
height : 50
},
items: [
{
title:'子面板一',
colspan : 3//设置跨列
},
{
title:'子面板二',
rowspan : 2,//设置跨行
height : 100
},
{title:'子面板三'},
{title:'子面板四'},
{title:'子面板五'}
]
})
7.layout.BorderLayout布局panel
var panel = new Ext.Panel({
title : 'Ext.layout.BorderLayout布局示例',
layout:'border',//表格布局
height : 250,
width : 400,
applyTo : 'panel',
items: [
{
title: 'north Panel',
html : '上边',
region: 'north',//指定子面板所在区域为north
height: 50
},
{
title: 'South Panel',
html : '下边',
region: 'south',//指定子面板所在区域为south
height: 50
},{
title: 'West Panel',
html : '左边',
region:'west',//指定子面板所在区域为west
width: 100
},{
title: 'east Panel',
html : '右边',
region:'east',//指定子面板所在区域为east
width: 100
},{
title: 'Main Content',
html : '中间',
region:'center'//指定子面板所在区域为center
}]
});
8.Ext.Viewport布局示例
new Ext.Viewport({
title : 'Ext.Viewport示例',
layout:'border',//表格布局
items: [
{
title: 'north Panel',
html : '上边',
region: 'north',//指定子面板所在区域为north
height: 100
},{
title: 'West Panel',
html : '左边',
region:'west',//指定子面板所在区域为west
width: 150
},{
title: 'Main Content',
html : '中间',
region:'center'//指定子面板所在区域为center
}]
});
9.Ext.TabPanel 标签页示例
var tabPanel = new Ext.TabPanel({
height : 150,
width : 300,
activeTab : 0,//默认激活第一个tab页
animScroll : true,//使用动画滚动效果
enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
applyTo : 'panel',
items: [
{title: 'tab标签页1',html : 'tab标签页1内容'},
{title: 'tab标签页2',html : 'tab标签页2内容'},
{title: 'tab标签页3',html : 'tab标签页3内容'},
{title: 'tab标签页4',html : 'tab标签页4内容'},
{title: 'tab标签页5',html : 'tab标签页5内容'}
]
});