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

[javascript] view
plaincopy

<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>