ExtJS之标准布局类(针对于panel)

最新推荐文章于 2018-04-08 16:48:43 发布

weixin_34109408

最新推荐文章于 2018-04-08 16:48:43 发布

阅读量70

点赞数

文章标签：数据结构与算法

原文链接：http://blog.51cto.com/4925054/1281311

版权

Fit自适应布局

使唯一的子元素充满父容器,如果父容器有两个或多个子元素,那么只显示第一个子元素(前提是没有设置 autoScroll: true属性)

Accordion布局(折叠布局)

代码:

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
layout: 'accordion', //设置为折叠布局
defaults: {
// 应用于每个panel
bodyStyle: 'padding:15px'
},
layoutConfig: {

titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: 'Panel content!'
}, {
title: 'Panel 2',
html: 'Panel content!'
}, {
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});

Card布局(卡片式布局)

点击 next

代码:

var panel = Ext.create('Ext.panel.Panel', {
title: 'Example Wizard',
width: 300,
height: 200,
layout: 'card', //设置panel的布局方式为卡片式布局
activeItem: 0, // 默认显示第一页
bodyStyle: 'padding:15px',
defaults: {
// 应用于每个面板
border: false
},
// 导航按钮
bbar: [ //定义底部工具栏, 不写xtype,默认是 button
{
id: 'prev',
text: 'Back',
handler: navHandler

},
'->',
{
id: 'next',
text: 'Next',
handler: navHandler
}],
// 定义轮换的页面
items: [{
id: 'card-0', //为了给setActiveItem()提供索引到哪个页面
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
function navHandler(btn) {
var index = Number(panel.layout.activeItem.id.substring(5));

if (btn.text == 'Back') {
index -= 1;
if (index < 0) {
index = 0;
}
else {
btn.enable = true; ;
}

}
else {
index += 1;
if (index > 3) {
index = 3;
}

}

panel.layout.setActiveItem('card-' + index);
}

Anchor锚点布局

分为三种,

1.百分比布局

2.偏移值布局

下面看三种布局样式

从左至右分别为 1百分比布局,2偏移值布局



代码: 切换显示格式,只需修改items内的 anchor值即可

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 400,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: 'anchor',
bodyStyle: 'background-color:#fff',
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true //收缩拉伸按钮

},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title: 'son panel1',
//anchor:'30% 80%' //第一个百分比是宽度 ,第二个是高度
anchor:'-100 -100' // 设置子面板相对于父面板右下边的偏移值

}

]

})

Absolute绝对定位布局

代码:

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 400,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: 'absolute',
bodyStyle: 'background-color:#fff',
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮
height: 50,
width: 100
},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title: 'son panel1',
x: 20, //设置相对父容器左边缘的距离值
y: 30 //这只相对父容器上面元的距离值

},
{
title: 'son panel2',
x: 150, //设置相对父容器左边缘的距离值
y: 90
}

]

})

Column列布局

意思就是把容器按指定列宽分割,来显示子元素,高度自适应,也可设置

列分割也分为两种形式: 估计宽度分割,百分比分割,下面示例演示两种形式

代码:

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 400,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: 'column',
bodyStyle: 'background-color:#fff',
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮
height: 50
// width: 100
},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title:'son1',
width:100

},
{
title:'son2',
columnWidth:.3
/*设置剩余宽度的30%,为什么说剩余宽度呢,那么就是
列布局是默认固定布局宽度优先计算,百分比宽度的
算法是总宽度减去固定宽度剩下的在做百分比分割
*/
},
{
title:'son3',
columnWidth: .7
}

]

})

table表格布局

虽然称之为表格布局,但是很清楚的看到 Div的存在,毫无table标记.

代码如下:

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 300,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: { type: 'table', columns: 2 },
bodyStyle: 'background-color:#fff',
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮
height: 50,
width: 120
},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title: 'son1',
width: 280, //设置宽度
colspan: 2 //跨两列

},
{
title: 'son2',
width: 150,
rowspan: 2 //跨两行

},
{
title: 'son3'

}

]

})

box盒布局

主要用的属性就是 flex用来决定占父容器的百分比

代码如下:

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 200,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: 'fit',
bodyStyle: 'background-color:#fff',
layout:{
type:'hbox', //水平盒布局
align:'stretch' //子面板高度充满父容器
},
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true //收缩拉伸按钮

},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title: 'son panel1',

flex:1 //五分之一

},
{
title: 'son panel2',
flex:4 //五分之四

}

]

})

ViewPort布局

结合边框布局使用:

个人感觉:还是这种简单易用,方便

代码:

Ext.create('Ext.panel.Panel', {

title: 'header',
tbar: ['顶部工具栏'],
bbar: ['底部工具栏'],
height: 200,
width: 300,
frame: true,
renderTo: document.body,
bodyPadding: 5,
layout: 'fit',
bodyStyle: 'background-color:#fff',
layout: {
type: 'border', //水平盒布局

},
defaults: {//设置默认属性
// autoScroll: true, //自动滚动条
collapsible: true //收缩拉伸按钮

},
// autoScroll: true, //自动滚动条
collapsible: true, //收缩拉伸按钮

items: [{

title: 'son panel1',

region:'north',
height:60

},
{
title: 'son panel2',
region:'west',
width:100

},
{
title:'son panel3',
region:'center'

}

]

})