ExtJS 的9种布局详解6(一)

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

Ext.onReady(function(){ var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局 renderTo:'paneldiv', title:'容器组件', layout:'accordion', width:500, height:200, layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果 items:[ {title:'元素1',html:''}, {title:'元素2',html:''}, {title:'元素3',html:''}, {title:'元素4',html:''} ] } ); });

 

 

 

 

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

三、anchor

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

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

  

 

四、Borde

r布局由类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. });  

Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items:[{ region:"north", height:50, title:"顶部面板" }, {region:"south", height:50, title:"底部面板"}, {region:"center", title:"中央面板"}, {region:"west", width:100, title:"左边面板"}, {region:"east", width:100, title:"右边面板"} ] }); });

 

 

  

例二：

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

Ext.onReady(function(){ var b = new Ext.Button({ id:"show-btn", //定义按钮的ID text:"弹出按钮", //定义按钮的标题 renderTo:document.body//将弹出按钮渲染到窗体上 }); var button = Ext.get('show-btn'); var win; button.on('click', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 margins: '3 3 3 0', activeTab: 0, //当前选项卡是第1个(从0开始) defaults: { autoScroll: true }, items: [{ title: 'Bogus Tab', html: "第一个Tab的内容." }, { title: 'Another Tab', html: "我是另一个Tab" }, { title: 'Closable Tab', html: "这是一个可以关闭的Tab", closable: true //显示关闭按钮 }] }); //定义一个Panel var nav = new Ext.Panel({ title: 'Navigation', region: 'west', //放在西边，即左侧 split: true, //设置为分割 width: 200, collapsible: true, //允许伸缩 margins: '3 0 3 3', cmargins: '3 3 3 3' }); //如果窗口第一次被打开时才创建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, //显示关闭按钮 width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 }); } win.show(button); }); }); });

 

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

Ext.onReady(function(){ var panel=new Ext.Panel({ renderTo:"hello", title:"容器组件", width:300, height:200, layout:"card", activeItem: 0, layoutConfig: { animate: true }, items:[ {title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"}, {title:"子元素3",html:"这是子元素3中的内容"} ], buttons:[{text:"切换",handler:changeTab}] }); var i=1; function changeTab(){ panel.getLayout().setActiveItem(i++); if(i>2)i=0; } });

 

 

 

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

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

 

 来源于网络总结。