ExtJs4 笔记layout 布局Word下载.docx
《ExtJs4 笔记layout 布局Word下载.docx》由会员分享，可在线阅读，更多相关《ExtJs4 笔记layout 布局Word下载.docx（18页珍藏版）》请在冰豆网上搜索。
19
20
21
22
23
24
25
26
27
//absolute
Ext.create（'
Ext.Panel'
{
title:
'
容器面板'
renderTo:
div1'
width:
400,
height:
300,
layout:
absolute'
items:
[{
面板1'
xtype:
"
panel"
html:
子元素1"
200,
100,
x:
50,
y:
50
},{
面板2'
子元素2"
80
}]
}）;
效果如下：
二、accordion
有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。
28
29
30
31
32
33
34
//accordion
div2'
accordion'
tools:
[{type:
gear'
handler:
function（）{
Ext.Msg.alert（'
提示'
'
配置按钮被点击。
'
）;
}
},{type:
refresh'
}],
id:
panel3'
面板3'
子元素3"
Ext.create（"
Ext.Button"
text:
打开第三页"
handler:
Ext.getCmp（'
）.expand（true）;
三、anchor
这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。
为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。
//anchor
div3'
anchor'
anchor:
80%20%'
-50-200'
100%30%'
四、border
这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式。
35
36
37
38
39
40
41
42
43
44
45
//border
div4'
border'
defaults:
{
split:
true,//是否有分割线
collapsible:
true,//是否可以折叠
bodyStyle:
padding:
15px'
},
region:
north'
//子元素的方位：
north、west、east、center、south
北'
70
west'
西'
100
east'
东'
center'
主体'
south'
南'
子元素4"
五、card
这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。
我们可以定义翻页按钮来控制当前处于活动状态的子元素。
//card
varcardNav=function（incr）{
varl=Ext.getCmp（'
cardPanel'
）.getLayout（）;
vari=l.activeItem.id.split（'
card'
）[1];
varnext=parseInt（i,10）+incr;
l.setActiveItem（next）;
cardPrev'
）.setDisabled（next===0）;
cardNext'
）.setDisabled（next===2）;
};
div5'
activeItem:
1,//默认活动项
card0'
card1'
card2'
bbar:
['
->
«
前一页'
Ext.Function.bind（cardNav,this,[-1]）
后一页»
Ext.Function.bind（cardNav,this,[1]）
六、column
这个布局把子元素按照列进行划分。
//column
div6'
column'
{//设置没一列的子元素的默认配置
100%'
columnWidth:
4/10,//设置列的宽度
border:
false,
子元素1'
子元素2'
120,
子元素3'
.40,
面板4'
子元素4'
七、fit
这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。
//fit
div7'
fit'
面板'
子元素'
false
八、table
这个布局用表格定位的方式去组织子元素，我们可以像表格一样设置rowspan和colspan。
//table
div8'
type:
table'
columns:
4
{frame:
true,width:
70,height:
50},
[
{html:
元素1'
rowspan:
3,height:
150},
元素2'
2,height:
100},
元素3'
},
元素4'
元素5'
colspan:
2,width:
140},
元素6'
元素7'
元素8'
}
]
九、vbox
这个布局把所有的子元素按照纵向排成一列。
//vbox
div9'
vbox'
pack:
start'
//纵向对齐方式start：
从顶部；
center：
从中部；
end：
从底部
align:
stretchmax'
//对齐方式center、left、right：
居中、左对齐、右对齐；
stretch：
延伸；
stretchmax：
以最大的元素为标准延伸
button'
小按钮'
flex:
1//表示当前子元素尺寸所占的均分的份数。
tbspacer'
//插入的空填充
3
{
中按钮'
scale:
medium'
大按钮'
large'
1
十、hbox
跟vbox类似，只不过变成了横向的。
//hbox
div10'
hbox'
end'
middle'
//对齐方式top、middle、bottom：
顶对齐、居中、底对齐；
},{
作者：
李盼（Lipan）
升级会员 