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>