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(){     
2.   
3.    var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局             
4.   
5.           renderTo:'paneldiv',     
6.   
7.           title:'容器组件',     
8.   
9.           layout:'accordion',            
10.   
11.           width:500,     
12.   
13.           height:200,     
14.   
15.           layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果  
16.   
17.           items:[     
18.   
19.         {title:'元素1',html:''},     
20.   
21.         {title:'元素2',html:''},     
22.   
23.         {title:'元素3',html:''},     
24.   
25.         {title:'元素4',html:''}     
26.   
27.        ]     
28.   
29.       }     
30.   
31.      );     
32.   
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(){   
2.   
3.                     new Ext.Viewport({  
4.   
5.                                         layout:"border",  
6.   
7.                                         items:[{  
8.   
9.                                                             region:"north",  
10.   
11.                                                             height:50,  
12.   
13.                                                             title:"顶部面板"  
14.   
15.                                         },  
16.   
17.                                         {region:"south",  
18.   
19.                                         height:50,  
20.   
21.                                         title:"底部面板"},  
22.   
23.                                         {region:"center",  
24.   
25.                                         title:"中央面板"},  
26.   
27.                                         {region:"west",  
28.   
29.                                         width:100,  
30.   
31.                                         title:"左边面板"},  
32.   
33.                                         {region:"east",  
34.   
35.                                         width:100,  
36.   
37.                                         title:"右边面板"}  
38.   
39.                                         ]  
40.   
41.                     });   
42.   
43. });  

 ----002----

例二：

Js代码  

1. Ext.onReady(function(){          
2.   
3. var b = new Ext.Button({  
4.   
5.     id:"show-btn",           //定义按钮的ID  
6.   
7.     text:"弹出按钮",        //定义按钮的标题                      
8.   
9.     renderTo:document.body//将弹出按钮渲染到窗体上  
10.   
11. });  
12.   
13. var button = Ext.get('show-btn');     
14.   
15. var win;             
16.   
17. button.on('click', function() {   
18.   
19.     //创建TabPanel     
20.   
21.     var tabs = new Ext.TabPanel({     
22.   
23.         region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间     
24.   
25.         margins: '3 3 3 0',     
26.   
27.         activeTab: 0,   //当前选项卡是第1个(从0开始)  
28.   
29.         defaults: {     
30.   
31.             autoScroll: true     
32.   
33.         },     
34.   
35.         items: [{     
36.   
37.             title: 'Bogus Tab',     
38.   
39.             html: "第一个Tab的内容."     
40.   
41.         }, {     
42.   
43.             title: 'Another Tab',     
44.   
45.             html: "我是另一个Tab"     
46.   
47.         }, {     
48.   
49.             title: 'Closable Tab',     
50.   
51.             html: "这是一个可以关闭的Tab",     
52.   
53.             closable: true //显示关闭按钮    
54.   
55.         }]     
56.   
57.         });     
58.   
59.         //定义一个Panel     
60.   
61.         var nav = new Ext.Panel({     
62.   
63.             title: 'Navigation',     
64.   
65.             region: 'west', //放在西边，即左侧     
66.   
67.             split: true,   //设置为分割  
68.   
69.             width: 200,     
70.   
71.             collapsible: true, //允许伸缩     
72.   
73.             margins: '3 0 3 3',     
74.   
75.             cmargins: '3 3 3 3'     
76.   
77.         });        
78.   
79.         //如果窗口第一次被打开时才创建     
80.   
81.         if (!win) {     
82.   
83.             win = new Ext.Window({     
84.   
85.                 title: 'Layout Window',     
86.   
87.                 closable: true,   //显示关闭按钮  
88.   
89.                 width: 600,     
90.   
91.                 height: 350,     
92.   
93.                 border : false,     
94.   
95.                 plain: true,     
96.   
97.                 layout: 'border',     
98.   
99.                 closeAction:'hide',     
100.   
101.                 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局     
102.   
103.             });     
104.   
105.         }     
106.   
107.         win.show(button);     
108.   
109.     });     
110.   
111. });     
112.   
113. });   

 ----003----

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

例一：

Js代码  

1. Ext.onReady(function(){   
2.   
3.     var panel=new Ext.Panel({  
4.   
5.         renderTo:"hello",  
6.   
7.         title:"容器组件",  
8.   
9.         width:300,  
10.   
11.         height:200,  
12.   
13.         layout:"card",  
14.   
15.         activeItem: 0,  
16.   
17.         layoutConfig: {  
18.   
19.             animate: true   
20.   
21.         },  
22.   
23.         items:[  
24.   
25.             {title:"子元素1",html:"这是子元素1中的内容"},  
26.   
27.             {title:"子元素2",html:"这是子元素2中的内容"},  
28.   
29.             {title:"子元素3",html:"这是子元素3中的内容"}  
30.   
31.         ],  
32.   
33.         buttons:[{text:"切换",handler:changeTab}]  
34.   
35.     });  
36.   
37.     var i=1;  
38.   
39.     function changeTab(){   
40.   
41.         panel.getLayout().setActiveItem(i++);   
42.   
43.         if(i>2)i=0;  
44.   
45.     }  
46.   
47. });  

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

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

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

Js代码  

1. Ext.onReady(function(){   
2.     new Ext.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.     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.             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. new Ext.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.     new Ext.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.     var panel=new Ext.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. });