ExtJS 經典佈局

先看看佈局的效果


借用靚女的靚照就可以讓窗體顯得更加漂亮了,祕訣!


下面再看看源代碼吧.

1. //這句是存放圖片的地方
   
2. function LoginDemo()
   
3. {        
   
4.     //左面顯示圖片
   
5.     var leftPanel = new Ext.Panel
   
6.     ({
   
7.          id:"leftPanel",contentEl:"leftImg",bodyStyle:"padding:20px"
   
8.     });
   
9.     //右上方顯示管理系統幾個字
   
10.     var right_topPanel = new Ext.Panel
    
11.     ({
    
12.         id:"right_topPanel",labelPad:0,labelWidth:50,bodyStyle:"padding-left:81px",layout:"form",
    
13.         items:{xtype:"label",text:"管理系統"}
    
14.     });
    
15.     //右下方顯示輸入框和按鈕
    
16.     var right_bottomPanel = new Ext.Panel
    
17.     ({
    
18.         id:"right_bottomPanel",labelPad:0,labelWidth:50,bodyStyle:"padding:10px",layout:"form",
    
19.         items:
    
20.         [
    
21.             {xtype:"field",id:"UserName",fieldLabel:"用戶名" ,width :150},
    
22.             {xtype:"field",id:"Password",fieldLabel:"密   碼" ,width :150}   
    
23.         ],
    
24.         buttons:
    
25.         [
    
26.             {xtype:"button",text:"確定",width:25},
    
27.             {xtype:"button",text:"取消",width:25}
    
28.         ],
    
29.         buttonAlign:"center"            
    
30.     });
    
31.     //右面將右上方和右下方組合在一起
    
32.     var rightPanel = new Ext.Panel
    
33.     ({
    
34.          id:"rightPanel",labelPad:0,labelWidth:50,bodyStyle:"padding:30px",layout:"form",            
    
35.          items:
    
36.          [
    
37.             right_topPanel,
    
38.             right_bottomPanel
    
39.          ]
    
40.     });
    
41.     //登陸窗體將左面和右面組合在一起,採用layout:"column",的佈局方式
    
42.     var loginPanel = new Ext.FormPanel
    
43.     ({
    
44.          id:"loginPanel",   
    
45.          height :420,
    
46.          frame:true,
    
47.          layout:"column",
    
48.          items:
    
49.          [                  
    
50.             leftPanel,rightPanel
    
51.          ]         
    
52.     });
    
53.     //通過Window窗口的方式顯示登陸窗體
    
54.     var loginWindow;
    
55.     if(!loginWindow)
    
56.     {
    
57.         loginWindow = new Ext.Window
    
58.         ({
    
59.              id:"loginWindow",
    
60.              title:"管理系統---登陸窗口",
    
61.              width:500,
    
62.              height:280,
    
63.              resizable:false,
    
64.              items:
    
65.              [
    
66.                 loginPanel
    
67.              ]
    
68.         });
    
69.     }
    
70.     loginWindow.show();
    
71. }
    
72. Ext.onReady(LoginDemo);

原文: http://www.cnblogs.com/mogen_yin/archive/2008/10/22/1316742.html