extjs学习06——extjs的初级UI设计3(Window实例)

extjs学习06——extjs的初级UI设计3(Window实例)
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结

Ext.onReady(function(){
	new Ext.Window({
		title:"添加人员",
		width:500,
		height:350,	
		plain:true//强制背景色，这个构造参数是window的
		layout:"form",
		labelWidth:59,
		defaultType:"textfield",
		/** 第一层布局元素：panel、textfield和buttons*/
		items:[{//没有指定xtype,则默认是panel
			xtype:"panel",
			baseCls:"x-plain",//效果相当于plain
			layout:"column",//列布局
			/** 第二层布局元素：两个对半分的panel*/
			items:[{
				columnWidth:5//将当前panel一分为二，各占一半
				style:"padding:5px";//css样式，内间距
				layout:"form",
				labelWidth:55,
				defaultType:"textfield",//指的是下面这个items的类型
				defaults:{width:160},//textfield的宽度
				baseCls:"x-plain",//效果是包含textfield的panel采用背景色
				/** 第三层布局元素：textfield*/
				items:[{
					fieldLabel:"姓名"
				},{
					fieldLabel:"年龄"
				},{
					fieldLabel:"出生日期"
				},{
					fieldLabel:"联系电话"
				},{
					fieldLabel:"手机号码"
				},{
					fieldLabel:"电子邮件"
				},{
					fieldLabel:"性别"
				}]
				/** 第三层布局元素：textfield*/
			},{
				columnWidth:5，
				layout:"form",
				labelWidth:55,
				baseCls:"x-plain",
				items:{
					xtype:"textfield",
					fieldLabel:"个人照片",
					width:170,
					height:177,
					inputType:"image"
				}
			}]
			/** 第二层布局元素：两个对半分的panel*/
		},{
			fieldLabel:"身份证号"
			width:400
		},{
			fieldLabel:"具体地址"
			width:400
		},{
			fieldLabel:"职位"
			width:400
		}],
		showLock:false,//自定义属性
		listeners:{//加载图片
			"show":function(_window){//此处不能使用render，因为render只会加载最外层的组件
										//其他的细节组件要等注册之后才会加载
				//alert(_window.findByType("textfield")[7].fieldLabel);
				if(!_window["showLock"]){
					_window.findByType("textfield")[7].getEl().dom.src="default_pic.gif";
					_window["showLock"]=true;
				}//希望达到的效果是：只有第一次加载时显示图片
			}	
		}
		buttons:[{
			text:"确定"
		},{
			text:"取消"
		}]
		/** 第一层布局元素：panel、textfield和buttons*/
	}).show();
});