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

 <scripttype='text/javascript'>
 Ext.onReady(function(){
 newExt.Window({
 title:"添加人员",
 width:500,
 height:345,
 plain:true,
 layout:"form",
 labelWidth:55,
 defaultType:"textfield",
 bodyStyle:"padding:5px",
 //style:"padding:5px",
 items:[{
 xtype:"panel",
 //设置背景色和容器颜色一致
 baseCls:"x-plain",
 layout:"column",
 items:[{
 columnWidth:0.5,
 baseCls:"x-plain",
 layout:"form",
 defaultType:"textfield",
 defaults:{width:160},
 labelWidth:55,
 items:[{
 fieldLabel:"姓名"
 },{
 fieldLabel:"年龄"
 },{
 fieldLabel:"出生日期"
 },{
 fieldLabel:"联系电话"
 },{
 fieldLabel:"手机号码"
 },{
 fieldLabel:"电子邮件"
 },{
 fieldLabel:"性别"
 }]
 },{
 columnWidth:0.5,
 baseCls:"x-plain",
 layout:"form",
 labelWidth:55,
 items:{
 xtype:"textfield",
 inputType:"image",
 fieldLabel:"个人照片",
 width:170,
 height:170
 }
 }]
 },{
 fieldLabel:"身份证号",width:400
 },{
 fieldLabel:"具体地址",width:400
 },{
 fieldLabel:"职位",width:400
 }],
 showLock:false,//用于只加载一次
 listeners:{
 "show":function(_window){
 //得到Ext中元素对象
 if(!_window["showLock"])
 _window.findByType("textfield")[7].getEl().dom.src="zhao.jpg";
 }
 },
 buttons:[{
 text:"确定"
 },{
 text:"取消"
 }]
 }).show();
 })
 </script>