ExtJS中九种布局方式

• １、布局概述

　　容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。容器中的子元素如何排放，在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.   });

　　ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。

　　Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

• ２、通过Examples看常用布局示例,

　　Ext Layout Browser、Border Layout示例；

• ３、Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
• 
  
• ４、Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
• 
  
• ５、Form布局，容器中的元素包括标题及组件内容两项值。
• 
  
• ６、Fit布局，子元素填充整个容器区域。
• 
  
• ７、Accordion布局，折叠布局。

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共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: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'  
68.             }, {  
69.                 id: 'card-1',  
70.                 html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'  
71.             }, {  
72.                 id: 'card-2',  
73.                 html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'  
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.                 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.     });  

• table

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

1. Ext.onReady(function(){  
2. var panel=new Ext.Panel(  
3.       {  
4.        renderTo:'paneldiv',  
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. });  
19.