ExtJS中九种布局方式Word文件下载.docx
- 文档编号:6818354
- 上传时间:2023-05-07
- 格式:DOCX
- 页数:15
- 大小:19.66KB
ExtJS中九种布局方式Word文件下载.docx
《ExtJS中九种布局方式Word文件下载.docx》由会员分享,可在线阅读,更多相关《ExtJS中九种布局方式Word文件下载.docx(15页珍藏版)》请在冰点文库上搜索。
面板2"
}]
8.
});
9.
10.
11.
12.
13.
14.
column"
15.
16.
17.
18.
ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。
ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息。
如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置。
Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。
∙2、通过Examples看常用布局示例,
ExtLayoutBrowser、BorderLayout示例;
∙3、Border布局,把容器分成东西南北中几大区域,容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
∙
∙4、Column布局,把子元素按列排放,通过columnWidth及width属性来指定子元素的所占的列宽度。
∙5、Form布局,容器中的元素包括标题及组件内容两项值。
∙6、Fit布局,子元素填充整个容器区域。
∙7、Accordion布局,折叠布局。
extjs的容器组件都可以设置它的显示风格,它的有效值有absolute,accordion,anchor,border,card,column,fit,formandtable.一共9种。
简单总结一下,帮助记忆。
∙absolute
顾名思义,在容器内部,根据指定的坐标定位显示
∙accordion
这个是最容易记的,手风琴效果
1.Ext.OnReady(function(){
2.var
panel=new
Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
'
paneldiv'
容器组件'
accordion'
500,
200,
9.
layoutConfig:
{animate:
false},
[
{title:
元素1'
html:
},
元素2'
元素3'
元素4'
}
]
);
18.});
∙anchor
这个效果具体还不知道有什么用,就是知道注意一下
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
1.Ext.onReady(function()
var
panel1
=
Ext.Panel({
panel1"
100,
anchor:
-50'
html:
高度等于100,宽度=容器宽度-50"
panel2
panel2"
50%'
高度等于100,宽度=容器宽度的50%"
panel3
18.
panel3"
19.
-10,
-250'
20.
宽度=容器宽度-10,高度=容器宽度-250"
21.
22.
23.
24.
win
Ext.Window({
25.
Anchor
Layout"
26.
400,
27.
28.
plain:
true,
29.
anchor'
30.
[panel1,
panel2,panel3]
31.
32.
win.show();
33.
∙border
将容器分为五个区域:
east,south,west,north,center
1.
Ext.onReady(function()
button
Ext.get('
show-btn'
win;
button.on('
click'
function()
//创建TabPanel
tabs
Ext.TabPanel({
region:
center'
//border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间
margins:
3
0'
activeTab:
0,
defaults:
autoScroll:
true
[{
Bogus
Tab'
第一个Tab的内容."
Another
我是另一个Tab"
Closable
这是一个可以关闭的Tab"
closable:
26.}]
//定义一个Panel
nav
Navigation'
west'
//放在西边,即左侧
split:
34.
35.
collapsible:
//允许伸缩
36.
0
3'
37.
cmargins:
38.
39.
40.
//如果窗口第一次被打开时才创建
41.
if
(!
win)
42.
43.
Layout
Window'
44.
45.
600,
46.
350,
47.
border
:
false,
48.
49.
border'
50.
closeAction:
hide'
51.
[nav,
tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局
52.
53.
54.
win.show(button);
55.
56.
∙card
像安装向导一样,一张一张显示
i
0;
navHandler
function(direction)
(direction
==
-1)
i--;
(i
<
0)
1)
i++;
>
2)
2;
return
false;
btnNext
Ext.get("
move-next"
).dom.document.getElementsByTagName("
button"
)[1];
btnBack
)[0];
btnBack.disabled
true;
else
btnNext.value
完成"
;
btnNext.disabled
下一步"
card.getLayout().setActiveItem(i);
};
card
注册向导'
card'
activeItem:
//
make
sure
the
active
item
is
set
on
container
config!
bodyStyle:
padding:
15px'
border:
false
bbar:
id:
move-prev'
text:
上一步'
handler:
navHandler.createDelegate(this,
[-1])
57.
->
58.
59.
move-next'
60.
下一步'
61.
[1])
62.
63.
],
64.
65.
66.
card-0'
67.
h1>
欢迎来到注册向导!
/h1>
p>
Step
1
of
3<
/p>
68.
69.
card-1'
70.
请填写注册资料!
2
71.
72.
card-2'
73.
注册成功!
-
Complete<
74.}],
75.
76.
container"
77.
78.
79.
80.
81.
∙column
把整个容器看成一列,然后向容器放入子元素时
Column
300,
column'
width=50%"
columnWidth:
0.5,
width=(容器宽度-容器内其它组件固定宽度)*50%"
200
width=250px"
固定宽度为250px"
∙fit
一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
Ext.Panel(
fit'
子元素1'
子元素2'
子元素3'
子元素4'
子元素5'
∙form
是一种专门用于管理表单中输入字段的布局
form
150,
230,
xtype:
form"
labelWidth:
30,
defa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 中九种 布局 方式