ExtJS layout的样式详解

http://wjt276.iteye.com/blog/453207

extjs的容器组件都可以设置它的显示风格，它的有效值有absolute, accordion, anchor, border, card, column, fit, form and table.一共9种

一、absolute顾名思义，在容器内部，根据指定的坐标定位显示

二、accordion这个是最容易记的，手风琴效果，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式

Js代码

1. Ext.onReady(function(){
3. varpanel=newExt.Panel({//Ext.formPanel就是Panel中用了form布局
5. renderTo:'paneldiv',
7. title:'容器组件',
9. layout:'accordion',
11. width:500,
13. height:200,
15. layoutConfig:{animate:false},//表示在执行展开折叠时是否应用动画效果
17. items:[
19. {title:'元素1',html:''},
21. {title:'元素2',html:''},
23. {title:'元素3',html:''},
25. {title:'元素4',html:''}
27. ]
29. }
31. );
33. });

上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001----

三、anchor这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。

该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

例一：

Js代码

1. Ext.onReady(function(){
3. newExt.Viewport({
5. layout:"border",
7. items:[{
9. region:"north",
11. height:50,
13. title:"顶部面板"
15. },
17. {region:"south",
19. height:50,
21. title:"底部面板"},
23. {region:"center",
25. title:"中央面板"},
27. {region:"west",
29. width:100,
31. title:"左边面板"},
33. {region:"east",
35. width:100,
37. title:"右边面板"}
39. ]
41. });
43. });

----002----

例二：

Js代码

1. Ext.onReady(function(){
3. varb=newExt.Button({
5. id:"show-btn",//定义按钮的ID
7. text:"弹出按钮",//定义按钮的标题
9. renderTo:document.body//将弹出按钮渲染到窗体上
11. });
13. varbutton=Ext.get('show-btn');
15. varwin;
17. button.on('click',function(){
19. //创建TabPanel
21. vartabs=newExt.TabPanel({
23. region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
25. margins:'3330',
27. activeTab:0,//当前选项卡是第1个(从0开始)
29. defaults:{
31. autoScroll:true
33. },
35. items:[{
37. title:'BogusTab',
39. html:"第一个Tab的内容."
41. },{
43. title:'AnotherTab',
45. html:"我是另一个Tab"
47. },{
49. title:'ClosableTab',
51. html:"这是一个可以关闭的Tab",
53. closable:true//显示关闭按钮
55. }]
57. });
59. //定义一个Panel
61. varnav=newExt.Panel({
63. title:'Navigation',
65. region:'west',//放在西边，即左侧
67. split:true,//设置为分割
69. width:200,
71. collapsible:true,//允许伸缩
73. margins:'3033',
75. cmargins:'3333'
77. });
79. //如果窗口第一次被打开时才创建
81. if(!win){
83. win=newExt.Window({
85. title:'LayoutWindow',
87. closable:true,//显示关闭按钮
89. width:600,
91. height:350,
93. border:false,
95. plain:true,
97. layout:'border',
99. closeAction:'hide',
101. items:[nav,tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
103. });
105. }
107. win.show(button);
109. });
111. });
113. });

----003----

五、card像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：

例一：

Js代码

1. Ext.onReady(function(){
3. varpanel=newExt.Panel({
5. renderTo:"hello",
7. title:"容器组件",
9. width:300,
11. height:200,
13. layout:"card",
15. activeItem:0,
17. layoutConfig:{
19. animate:true
21. },
23. items:[
25. {title:"子元素1",html:"这是子元素1中的内容"},
27. {title:"子元素2",html:"这是子元素2中的内容"},
29. {title:"子元素3",html:"这是子元素3中的内容"}
31. ],
33. buttons:[{text:"切换",handler:changeTab}]
35. });
37. vari=1;
39. functionchangeTab(){
41. panel.getLayout().setActiveItem(i++);
43. if(i>2)i=0;
45. }
47. });

上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004

点击一下“切换”按钮，结果如下图所示：005

例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)

Js代码

1. Ext.onReady(function(){
2. newExt.Panel({
3. renderTo:"hello",
4. title:"容器组件",
5. layout:"column",
6. width:500,
7. height:100,
8. items:[{title:"列1",columnWidth:0.2},
9. {title:"列2",columnWidth:0.3},
10. {title:"列3",columnWidth:0.3},
11. {title:"列4",columnWidth:0.2}
12. ]
13. });
14. });

form是一种专门用于管理表单中输入字段的布局

Js代码

1. Ext.onReady(function(){
2. varwin=newExt.Window({
3. title:"formLayout",
4. height:150,
5. width:230,
6. plain:true,
7. bodyStyle:'padding:15px',
8. items:{
9. xtype:"form",
10. labelWidth:30,
11. defaultType:"textfield",
12. frame:true,
13. items:[
14. {
15. fieldLabel:"姓名",
16. name:"username",
17. allowBlank:false//必填项(非空)
18. },
19. {
20. fieldLabel:"呢称",
21. name:"nickname"
22. },
23. {
24. fieldLabel:"生日",
25. xtype:'datefield',
26. name:"birthday",
27. width:127
28. }
29. ]
30. }
31. });
32. win.show();
33. });

fit一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

例一：

例二：如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：

Js代码

1. Ext.onReady(function(){
2. newExt.Panel({
3. renderTo:"hello",
4. title:"容器组件",
5. layout:"fit",
6. width:500,
7. height:100,
8. items:[{title:"子元素1",html:"这是子元素1中的内容"},
9. {title:"子元素2",html:"这是子元素2中的内容"}
10. ]
11. });
12. });

例三：如果不使用布局Fit，代码如下：

Js代码

1. Ext.onReady(function(){
2. newExt.Panel({
3. renderTo:"hello",
4. title:"容器组件",
5. width:500,
6. height:200,
7. items:[{title:"子元素1",html:"这是子元素1中的内容"},
8. {title:"子元素2",html:"这是子元素2中的内容"}
9. ]
10. });
11. });

table按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

例一：

Js代码

1. Ext.onReady(function(){
2. varpanel=newExt.Panel({
3. renderTo:'hello',
4. title:'容器组件',
5. layout:'table',
6. width:500,
7. height:200,
8. layoutConfig:{columns:3},//将父容器分成3列
9. items:[
10. {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
11. {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
12. {title:'元素3',html:'sdfsdfsdf'},
13. {title:'元素4',html:''}
14. ]
15. });
16. });