ExtJS学习笔记：复杂页面布局实现

[javascript]  view plain copy

1. <script type='text/javascript'>  
2.     Ext.onReady(function(){  
3.         new Ext.Window({  
4.             title:"添加人员",  
5.             width:500,  
6.             height:345,  
7.             plain:true,  
8.             layout:"form",  
9.             labelWidth:55,  
10.             defaultType:"textfield",  
11.             bodyStyle:"padding:5px",  
12.             //style:"padding:5px",  
13.             items:[{  
14.                 xtype:"panel",  
15.                 //设置背景色和容器颜色一致  
16.                 baseCls:"x-plain",  
17.                 layout:"column",  
18.                 items:[{  
19.                     columnWidth:0.5,  
20.                     baseCls:"x-plain",  
21.                     layout:"form",  
22.                     defaultType:"textfield",  
23.                     defaults:{width:160},  
24.                     labelWidth:55,  
25.                     items:[{  
26.                         fieldLabel:"姓名"  
27.                     },{  
28.                         fieldLabel:"年龄"  
29.                     },{  
30.                         fieldLabel:"出生日期"  
31.                     },{  
32.                         fieldLabel:"联系电话"  
33.                     },{  
34.                         fieldLabel:"手机号码"  
35.                     },{  
36.                         fieldLabel:"电子邮件"  
37.                     },{  
38.                         fieldLabel:"性别"  
39.                     }]  
40.                 },{  
41.                     columnWidth:0.5,  
42.                     baseCls:"x-plain",  
43.                     layout:"form",  
44.                     labelWidth:55,  
45.                     items:{  
46.                         xtype:"textfield",  
47.                         inputType:"image",  
48.                         fieldLabel:"个人照片",  
49.                         width:170,  
50.                         height:170  
51.                     }  
52.                 }]  
53.             },{  
54.                 fieldLabel:"身份证号",width:400  
55.             },{  
56.                 fieldLabel:"具体地址",width:400  
57.             },{  
58.                 fieldLabel:"职位",width:400  
59.             }],  
60.             showLock:false,//用于只加载一次  
61.             listeners:{  
62.                 "show":function(_window){  
63.                     //得到Ext中元素对象  
64.                     if(!_window["showLock"])  
65.                     _window.findByType("textfield")[7].getEl().dom.src="zhao.jpg";  
66.                 }  
67.             },  
68.             buttons:[{  
69.                 text:"确定"  
70.             },{  
71.                 text:"取消"  
72.             }]  
73.         }).show();  
74.     })  
75. </script>