ExtJS布局详解：Absolute, Anchor, Border等
本文详细介绍了ExtJS中的多种布局类型，包括Absolute、Anchor、Border、Accordion、Card、Form、Table、Column和Fit。通过具体代码示例展示了各布局的特点和用法。
好久没看过EXT了，最近项目中需要用到就重新复习了下，对于一些知识也都模糊不清，现对Extjs中的layout布局进行总结下：
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下
2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'
01.
Ext.onReady(function() {
02.
Ext.create('Ext.Window',{
03.
title:'Anchor layout',
04.
width:400,
05.
height:400,
06.
layout:'anchor',
07.
plain: true,
08.
items:[
09.
Ext.create('Ext.panel.Panel',{
10.
title:'panel1',
11.
height:100,
12.
anchor:'-50',
13.
html:'高度等于100，宽度= 容器宽度-50'
14.
}),
15.
Ext.create('Ext.panel.Panel',{
16.
title:'panel2',
17.
height:100,
18.
anchor:'50%',
19.
html:'高度等于100，宽度=容器的宽度*50%'
20.
}),
21.
Ext.create('Ext.panel.Panel',{
22.
title:'panel3',
23.
anchor:'-10,-200',
24.
html:'高度等于容器高度-10,宽度等于容器宽度-200'
25.
})
26.
]
27.
28.
}).show();
29.
});
3.border:将容器分为五个区域:east,south,west,north,center
01.
Ext.onReady(function(){
02.
var tab = Ext.create('Ext.tab.Panel',{
03.
region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
04.
margins:'3,3,3,0',
05.
activeTab:0,
06.
defaults:{
07.
autoScroll:true
08.
},
09.
items:[{
10.
title:'tab1',
11.
html:'第一个tab内容'
12.
},{
13.
title:'tab2',
14.
html:'第二个tab内容'
15.
},{
16.
title:'tab3',
17.
html:'第三个tab内容'
18.
}]
19.
20.
})
21.
var nav = Ext.create('Ext.panel.Panel',{
22.
title:'navigation',
23.
region:'west',
24.
split:true,
25.
width:200,
26.
collapsible:true,//允许伸缩
27.
margins:'3,0,3,3',
28.
cmargins:'3,3,3,'
29.
});
30.
Ext.create('Ext.Window',{
31.
title:'Layout Window',
32.
width:600,
33.
height:350,
34.
closable:true,
35.
border:false,
36.
plain:true,
37.
layout:'border',
38.
closeAction:'hide',
39.
items:[nav,tab]
40.
}).show();
41.
)};
4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。
01.
Ext.OnReady(function(){
02.
Ext.create('Ext.panel.Panel',{
03.
title:'容器组件',
04.
layout:'accordion',
05.
width:600,
06.
height:200,
07.
layoutConfig:{animate:false},
08.
items:[{
09.
title:'元素1',html:''
10.
},{
11.
title:'元素2',html:''
12.
},{
13.
title:'元素3',html:''
14.
},{
15.
title:'元素4',html:''
16.
}]
17.
18.
});
19.
});
5.card:像安装向导一样，一张一张显示
01.
Ext.onReady(function(){
02.
var navigate = function(panel,direction){
03.
var layout = panel.getLayout();
04.
layout[direction]();
05.
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
06.
Ext.getCmp('move-next').setDisabled(!layout.getNext());
07.
};
08.
Ext.create('Ext.panel.Panel',{
09.
title:'Example Wizard',
10.
height:500,
11.
width:400,
12.
layout: 'card',
13.
activeItem:0,
14.
bodyStyle:'padding:15px',
15.
animCollapse:true,
16.
renderTo:Ext.getBody(),
17.
defaults:{
18.
// applied to each contained panel
19.
border: false
20.
},
21.
bbar:[{
22.
id:'move-prev',
23.
text:'back',
24.
handler:function(btn){
25.
navigate(btn.up("panel"),"prev");
26.
},
27.
disabled:true
28.
},'->',{
29.
id:'move-next',
30.
text:"next",
31.
handler:function(btn){
32.
navigate(btn.up("panel"),"next");
33.
}
34.
}],
35.
items:[{
36.
id:'card-0',
37.
html:'<h1>Welcome to the Wizard!</h1>'
38.
},{
39.
id:'card-1',
40.
html:'<p>step 2 of 3 </p>'
41.
},{
42.
id:'card-2',
43.
html:'<h1>Congratulations!</h1><p>Step 3 of 3-complete</p>'
44.
}]
45.
});
46.
});
6.form:是一种专门用于管理表单中输入字段的布局
01.
Ext.onReady(function() {
02.
var win = Ext.create('Ext.Window',{
03.
title: "form Layout",
04.
height: 150,
05.
width: 230,
06.
plain: true,
07.
bodyStyle: 'padding:15px',
08.
items:
09.
{
10.
xtype: "form",
11.
labelWidth: 30,
12.
defaultType: "textfield",
13.
frame:true,
14.
items:
15.
[
16.
{
17.
fieldLabel:"姓名",
18.
name:"username",
19.
allowBlank:false
20.
},
21.
{
22.
fieldLabel:"呢称",
23.
name:"nickname"
24.
},
25.
{
26.
fieldLabel: "生日",
27.
xtype:'datefield',
28.
name: "birthday",
29.
width:127
30.
}
31.
]
32.
}
33.
});
34.
win.show();
35.
});
7.table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
01.
Ext.onReady(function(){
02.
Ext.create('Ext.panel.Panel',
03.
{
04.
renderTo:Ext.getBody(),
05.
title:'容器组件',
06.
layout:'table',
07.
width:500,
08.
height:200,
09.
layoutConfig:{columns:3},//将父容器分成3列
10.
items:[
11.
{title:'元素1',html:'ssssssssss',rowspan:2,height:100},
12.
{title:'元素2',html:'dfffsddsdfsdf',colspan:2},
13.
{title:'元素3',html:'sdfsdfsdf'},
14.
{title:'元素4',html:''}
15.
]
16.
}
17.
);
18.
});
8.column:把整个容器看成一列,然后向容器放入子元素时
01.
Ext.onReady(function() {
02.
var win = Ext.create('Ext.Window',{
03.
title: "Column Layout",
04.
height: 300,
05.
width: 400,
06.
plain: true,
07.
layout: 'column',
08.
items: [{
09.
title:"width=50%",
10.
columnWidth:0.5,
11.
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
12.
height:200
13.
},
14.
{
15.
title:"width=250px",
16.
width: 200,
17.
height:100,
18.
html:"固定宽度为250px"
19.
}
20.
]
21.
});
22.
win.show();
23.
});
9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）
01.
Ext.OnReady(function(){
02.
Ext.create(Ext.create(Ext.panel.Panel',
03.
{
04.
renderTo:'paneldiv',
05.
title:'容器组件',
06.
layout:'fit',
07.
width:500,
08.
height:100,
09.
items:[
10.
{title:'子元素1'},
11.
{title:'子元素2'},
12.
{title:'子元素3'},
13.
{title:'子元素4'},
14.
{title:'子元素5'}
15.
]
16.
}
17.
);
18.
});
作者:zhouyihui2010
原文:http://zhouyihui2010.iteye.com/blog/1235404
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
