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

<script type='text/javascript'>
	Ext.onReady(function(){
		new Ext.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>