ExtJS中layout布局详解

layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下
2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'
Js代码  

1. Ext.onReady(function() {    
2.        Ext.create('Ext.Window',{  
3.         title:'Anchor layout',  
4.         width:400,  
5.         height:400,  
6.         layout:'anchor',  
7.         plain: true,  
8.         items:[  
9.             Ext.create('Ext.panel.Panel',{  
10.                 title:'panel1',  
11.                 height:100,  
12.                 anchor:'-50',  
13.                 html:'高度等于100，宽度= 容器宽度-50'  
14.             }),  
15.             Ext.create('Ext.panel.Panel',{  
16.                 title:'panel2',  
17.                 height:100,  
18.                 anchor:'50%',  
19.                 html:'高度等于100，宽度=容器的宽度*50%'  
20.             }),  
21.             Ext.create('Ext.panel.Panel',{  
22.                 title:'panel3',  
23.                 anchor:'-10,-200',  
24.                 html:'高度等于容器高度-10,宽度等于容器宽度-200'  
25.             })  
26.         ]  
27.           
28.     }).show();   
29.     });   

3.border:将容器分为五个区域:east,south,west,north,center
Js代码  

1. Ext.onReady(function(){  
2.          var tab = Ext.create('Ext.tab.Panel',{  
3.         region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间    
4.         margins:'3,3,3,0',  
5.         activeTab:0,  
6.         defaults:{  
7.             autoScroll:true  
8.         },  
9.         items:[{  
10.             title:'tab1',  
11.             html:'第一个tab内容'  
12.         },{  
13.             title:'tab2',  
14.             html:'第二个tab内容'  
15.         },{  
16.             title:'tab3',  
17.             html:'第三个tab内容'  
18.         }]  
19.           
20.     })  
21.     var nav = Ext.create('Ext.panel.Panel',{  
22.         title:'navigation',  
23.         region:'west',  
24.         split:true,  
25.         width:200,  
26.         collapsible:true,//允许伸缩  
27.         margins:'3,0,3,3',  
28.         cmargins:'3,3,3,'  
29.     });  
30.     Ext.create('Ext.Window',{  
31.         title:'Layout Window',  
32.         width:600,  
33.         height:350,  
34.         closable:true,  
35.         border:false,  
36.         plain:true,  
37.         layout:'border',  
38.         closeAction:'hide',  
39.         items:[nav,tab]  
40.     }).show();  
41. )};  

4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。
Js代码  

1. Ext.OnReady(function(){    
2.      Ext.create('Ext.panel.Panel',{  
3.         title:'容器组件',  
4.         layout:'accordion',  
5.         width:600,  
6.         height:200,  
7.         layoutConfig:{animate:false},  
8.         items:[{  
9.            title:'元素1',html:''  
10.         },{  
11.            title:'元素2',html:''  
12.         },{  
13.            title:'元素3',html:''  
14.         },{  
15.            title:'元素4',html:''  
16.         }]  
17.           
18.     });   
19. });   

5.card:像安装向导一样，一张一张显示
Js代码  

1. Ext.onReady(function(){  
2.     var navigate = function(panel,direction){  
3.         var layout = panel.getLayout();  
4.         layout[direction]();  
5.         Ext.getCmp('move-prev').setDisabled(!layout.getPrev());  
6.         Ext.getCmp('move-next').setDisabled(!layout.getNext());  
7.     };  
8.     Ext.create('Ext.panel.Panel',{  
9.                 title:'Example Wizard',  
10.                 height:500,  
11.                 width:400,  
12.                 layout: 'card',  
13.                 activeItem:0,  
14.                 bodyStyle:'padding:15px',  
15.                 animCollapse:true,  
16.                 renderTo:Ext.getBody(),  
17.                 defaults:{  
18.                      // applied to each contained panel  
19.                     border: false  
20.                 },  
21.                 bbar:[{  
22.                     id:'move-prev',  
23.                     text:'back',  
24.                     handler:function(btn){  
25.                         navigate(btn.up("panel"),"prev");  
26.                     },  
27.                     disabled:true  
28.                 },'->',{  
29.                     id:'move-next',  
30.                     text:"next",  
31.                     handler:function(btn){  
32.                         navigate(btn.up("panel"),"next");  
33.                     }  
34.                 }],  
35.                 items:[{  
36.                     id:'card-0',  
37.                     html:'<h1>Welcome to the Wizard!</h1>'  
38.                 },{  
39.                     id:'card-1',  
40.                     html:'<p>step 2 of 3 </p>'  
41.                 },{  
42.                     id:'card-2',  
43.                     html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'  
44.                 }]  
45.             });  
46. });  

6.form:是一种专门用于管理表单中输入字段的布局
Js代码  

1. Ext.onReady(function() {    
2.         var win = Ext.create('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.                 defaultType: "textfield",    
13.                 frame:true,    
14.                 items:     
15.                 [    
16.                     {    
17.                         fieldLabel:"姓名",    
18.                         name:"username",    
19.                         allowBlank:false    
20.                     },    
21.                     {    
22.                         fieldLabel:"呢称",    
23.                         name:"nickname"    
24.                     },    
25.                     {    
26.                         fieldLabel: "生日",    
27.                         xtype:'datefield',    
28.                         name: "birthday",    
29.                         width:127    
30.                     }    
31.                 ]    
32.             }    
33.         });    
34.         win.show();    
35.     });    

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

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

8.column:把整个容器看成一列,然后向容器放入子元素时
Js代码  

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

9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）
Js代码  

1. Ext.OnReady(function(){    
2.    Ext.create(Ext.create(Ext.panel.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. });  
    

转载地址：http://zhouyihui2010.iteye.com/blog/1235404点击打开链接