ExtJS中九种布局方式.docx
- 文档编号:4651407
- 上传时间:2023-05-07
- 格式:DOCX
- 页数:15
- 大小:19.66KB
ExtJS中九种布局方式.docx
《ExtJS中九种布局方式.docx》由会员分享,可在线阅读,更多相关《ExtJS中九种布局方式.docx(15页珍藏版)》请在冰点文库上搜索。
ExtJS中九种布局方式
∙1、布局概述
容器中可以放置各种各样的元素,这些元素在容器怎么排放,是从左到右,还是从上到下,这些是容器自身所不知道的。
容器中的子元素如何排放,在Ext中由布局来处理。
所谓布局就是指容器组件中子元素的分布、排列组合方式。
Ext的所有容器组件都支持布局操作,每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列、组合及渲染方式等。
Ext提供了一套功能强大的布局系统,通过这些布局的应用,可以满足应用程序中各种复杂的用户界面布局处理,下面我们将对ExtJS中的布局作介绍。
Ext中的每一个布局类都有一个简短的布局名称,在使用布局的时候直接使用布局名称即可。
布局主要应用于容器组件,在Container类中,提供了一个layout配置选项,该项可以是一个预定义布局名称(字符串),也可以是一个布局对象。
比如下面是两种使用布局的方式:
1.new Ext.Panel({
2. renderTo:
"test",
3. width:
400,
4. height:
100,
5. layout:
new Ext.layout.ColumnLayout(),
6. items:
[{columnWidth:
.5, title:
"面板1"},
7. {columnWidth:
.5, title:
"面板2"}]
8. });
9.
10. new Ext.Panel({
11. renderTo:
"test",
12. width:
400,
13. height:
100,
14. layout:
"column",
15. items:
[{columnWidth:
.5, title:
"面板1"},
16. {columnWidth:
.5, title:
"面板2"}]
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布局
3. {
4. renderTo:
'paneldiv',
5. title:
'容器组件',
6. layout:
'accordion',
7. width:
500,
8. height:
200,
9. layoutConfig:
{animate:
false},
10. items:
[
11. {title:
'元素1',html:
''},
12. {title:
'元素2',html:
''},
13. {title:
'元素3',html:
''},
14. {title:
'元素4',html:
''}
15. ]
16. }
17. );
18.});
∙anchor
这个效果具体还不知道有什么用,就是知道注意一下
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
1.Ext.onReady(function() {
2. var panel1 = new Ext.Panel({
3. title:
"panel1",
4. height:
100,
5. anchor:
'-50',
6. html:
"高度等于100,宽度=容器宽度-50"
7. });
8.
9. var panel2 = new Ext.Panel({
10. title:
"panel2",
11. height:
100,
12. anchor:
'50%',
13. html:
"高度等于100,宽度=容器宽度的50%"
14.
15. });
16.
17. var panel3 = new Ext.Panel({
18. title:
"panel3",
19. anchor:
'-10, -250',
20. html:
"宽度=容器宽度-10,高度=容器宽度-250"
21.
22. });
23.
24. var win = new Ext.Window({
25. title:
"Anchor Layout",
26. height:
400,
27. width:
400,
28. plain:
true,
29. layout:
'anchor',
30. items:
[panel1, panel2,panel3]
31. });
32. win.show();
33. });
∙border
将容器分为五个区域:
east,south,west,north,center
1. Ext.onReady(function() {
2.
3. var button = Ext.get('show-btn');
4. var win;
5.
6. button.on('click', function() {
7.
8. //创建TabPanel
9. var tabs = new Ext.TabPanel({
10. region:
'center', //border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间
11. margins:
'3 3 3 0',
12. activeTab:
0,
13. defaults:
{
14. autoScroll:
true
15. },
16. items:
[{
17. title:
'Bogus Tab',
18. html:
"第一个Tab的内容."
19. }, {
20. title:
'Another Tab',
21. html:
"我是另一个Tab"
22. }, {
23. title:
'Closable Tab',
24. html:
"这是一个可以关闭的Tab",
25. closable:
true
26.}]
27. });
28.
29. //定义一个Panel
30. var nav = new Ext.Panel({
31. title:
'Navigation',
32. region:
'west', //放在西边,即左侧
33. split:
true,
34. width:
200,
35. collapsible:
true, //允许伸缩
36. margins:
'3 0 3 3',
37. cmargins:
'3 3 3 3'
38. });
39.
40. //如果窗口第一次被打开时才创建
41. if (!
win) {
42. win = new Ext.Window({
43. title:
'Layout Window',
44. closable:
true,
45. width:
600,
46. height:
350,
47. border :
false,
48. plain:
true,
49. layout:
'border',
50. closeAction:
'hide',
51. items:
[nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局
52. });
53. }
54. win.show(button);
55. });
56. });
∙card
像安装向导一样,一张一张显示
1.Ext.onReady(function() {
2.
3. var i = 0;
4.
5. var navHandler = function(direction) {
6. if (direction == -1) {
7. i--;
8. if (i < 0) { i = 0; }
9. }
10.
11. if (direction == 1) {
12. i++;
13. if (i > 2) { i = 2; return false; }
14. }
15.
16.
17. var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
18. var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
19.
20. if (i == 0) {
21. btnBack.disabled = true;
22. }
23. else {
24. btnBack.disabled = false;
25. }
26.
27. if (i == 2) {
28. btnNext.value = "完成";
29. btnNext.disabled = true;
30. }
31. else {
32. btnNext.value = "下一步";
33. btnNext.disabled = false;
34. }
35.
36. card.getLayout().setActiveItem(i);
37.
38. };
39.
40.
41. var card = new Ext.Panel({
42. width:
200,
43. height:
200,
44. title:
'注册向导',
45. layout:
'card',
46. activeItem:
0, // make sure the active item is set on the container config!
47. bodyStyle:
'padding:
15px',
48. defaults:
{
49. border:
false
50. },
51. bbar:
[
52. {
53. id:
'move-prev',
54. text:
'上一步',
55. handler:
navHandler.createDelegate(this, [-1])
56. },
57. '->',
58. {
59. id:
'move-next',
60. text:
'下一步',
61. handler:
navHandler.createDelegate(this, [1])
62. }
63. ],
64.
65. items:
[{
66. id:
'card-0',
67. html:
'
欢迎来到注册向导!
Step 1 of 3
'68. }, {
69. id:
'card-1',
70. html:
'
请填写注册资料!
Step 2 of 3
'71. }, {
72. id:
'card-2',
73. html:
'
注册成功!
Step 3 of 3 - Complete
'74.}],
75.
76. renderTo:
"container"
77. });
78.
79.
80.
81. });
∙column
把整个容器看成一列,然后向容器放入子元素时
1.Ext.onReady(function() {
2. var win = new Ext.Window({
3. title:
"Column Layout",
4. height:
300,
5. width:
400,
6. plain:
true,
7. layout:
'column',
8. items:
[{
9. 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. });
∙fit
一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
1.Ext.OnReady(function(){
2.var panel=new Ext.Panel(
3. {
4. renderTo:
'paneldiv',
5. title:
'容器组件',
6. layout:
'fit',
7. width:
500,
8. height:
100,
9. items:
[
10. {title:
'子元素1'},
11. {title:
'子元素2'},
12. {title:
'子元素3'},
13. {title:
'子元素4'},
14. {title:
'子元素5'}
15. ]
16. }
17. );
18.});
∙form
是一种专门用于管理表单中输入字段的布局
1.Ext.onReady(function() {
2. var win = new Ext.Window({
3. title:
"form Layout",
4. height:
150,
5. width:
230,
6. plain:
true,
7. bodyStyle:
'padding:
15px',
8. items:
9. {
10. xtype:
"form",
11. labelWidth:
30,
12. defa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 中九种 布局 方式
![提示](https://static.bingdoc.com/images/bang_tan.gif)