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