EXT borderLayout图解（初学有用）

Js代码  

1. Ext.onReady(function(){  
2.             var south = new Ext.Panel({  
3.                 region : "south",// 布局为south  
4.                 margins: '5 5 5 5',   
5.                 collapsible: true,            
6.                 title : "south",  
7.                 height : 150,  
8.                 frame : true  
9.             });  
10.               
11.             var north = new Ext.Panel({  
12.                 region : "north",// 布局为north  
13.                 margins: '5 5 5 5',  
14.                 collapsible: true,  
15.                 title : "north",  
16.                 height : 150,  
17.                 frame : true  
18.             });  
19.               
20.             var west = new Ext.Panel({  
21.                 region : "west",// 布局为west  
22.                 margins: '0 5 0 5',  
23.                 collapsible: true,  
24.                 title : "west",  
25.                 width : 150,  
26.                 frame : true  
27.             });  
28.               
29.             var east = new Ext.Panel({  
30.                 region : "east",// 布局为east  
31.                 margins: '0 5 0 5',  
32.                 collapsible: true,  
33.                 title : "east",  
34.                 width : 150,  
35.                 frame : true  
36.             });  
37.               
38.             var center = new Ext.Panel({  
39.                 region : "center", //使用borderLayout region : "center"必须要有  
40.                 title : "center",  
41.                 frame : true  
42.             });  
43.               
44.             var win = new Ext.Window({  
45.                 title : "borderLayout",  
46.                 layout : "border", // 定义layout  
47.                 width : 650,  
48.                 height : 500,  
49.                 resizabled : false,  
50.                 items : [south,north,east,west,center]  
51.             }).show();  
52.         });