layout

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

把整个容器看成一列,然后向容器放入子元素时 ,其中columnWidth是根据同一个items中的其他组件宽度计算出来的((容器宽度-容器内其它组件固定宽度)*50%)

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. });