ExtJS专题（十）:layout布局的使用（3）

将容器分为五个区域: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.                      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.                          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.         });