ExtJs之窗口样式实现

大概学习了下Ext的技术，写了一个下图样子的东西，看看应该还不错，布局各方面还算可以，再次记录下，以便日后查用！手机充值：http://yjck67.taobao.com，自己的小店

 下面直接上代码：

 

var sexArray = new Array();
Ext.onReady(function(){
	var JOB = Ext.data.Record.create({name:"job"})//构造一个函数
	var _window = new Ext.Window({
		title:"添加人员",
		width:500,
		height:350,
		plain:true,
		defaultType:"textfield",
		items:[{
			xtype:"panel",
			baseCls:"x-plain",
			style:"padding:5px",
			layout:"column",
			items:[{
				columnWidth:.5,
				baseCls:"x-plain",
				layout:"form",
				labelWidth:55,
				defaults:{xtype:"textfield",width:150},
				items:[{
					fieldLabel:"姓名"
				},{
					fieldLabel:"年龄",
					readOnly:true,
					value:"26"
				},{
					xtype:"datefield",
					format:"Y-m-d",
					readOnly:true,
					value:"1986-02-13",
					fieldLabel:"出生日期",
					listeners:{
						"change":function(){
							var _age = _window.findByType("textfield")[1];
							_age.setValue(new Date().getFullYear() - _window.findByType("datefield")[0].getValue().getFullYear()+1);
						}
					}
				},{
					fieldLabel:"联系电话"
				},{
					fieldLabel:"手机号码"
				},{
					fieldLabel:"电子邮件"
				},{
					xtype:"combo",
					fieldLabel:"性别",
					mode:"local",
					displayField:"sex",
					readOnly:true,
					triggerAction:"all",
					value:"男",
					store:new Ext.data.SimpleStore({
						fields:["sex"],
						data:[["男"],["女"]]
					})
				}]
			},{
				columnWidth:.5,
				layout:"form",
				baseCls:"x-plain",
				labelWidth:55,
				items:{
					xtype:"textfield",
					fieldLabel:"个人照片",
					width:170,
					height:177,
					inputType:"image"
				}
			}]
		},{
			xtype:"panel",
			baseCls:"x-plain",
			layout:"form",
			style:"padding:5px",
			labelWidth:55,
			defaults:{xtype:"textfield"},
			items:[{
					fieldLabel:"身份证号",
					width:400			
				},{
					fieldLabel:"具体地址",
					width:400			
				},{
					xtype:"panel",
					layout:"column",
					baseCls:"x-plain",
					defaults:{baseCls:"x-plain"},
					items:[{
					columnWidth:.4,
					layout:"form",
					labelWidth:55,					
					items:[{
						xtype:"combo",
						fieldLabel:"职位",
						anchor:"100%",
						readOnly:true,
						triggerAction:"all",
						mode:"local",
						displayField:"job",
						store:new Ext.data.SimpleStore({
						fields:["job"],
						data:[["程序员"],["经理"],["主管"],["测试工程师"]]
						}),
						listeners:{
						"select":function(_combo,_record,_index){
							_combo["selectItem"] = _record;//自定义属性，如果selectitem存在则引用，没有则创建
						}
					}
					
					}]					
				},{
					columnWidth:.6,
					buttonAlign:"center",
					style:"padding:0 0 0 5px",
					buttons:[{	
						xtype:"button",
						text:"添加职位",
						handler:function(){
							var _job = _window.findByType("combo")[1];
							//var _store = _job.store;
							var _store = _job.getStore();
							//alert(_store);
							Ext.Msg.prompt("请输入职位名称","职位名称",function(btn,text){
								if(btn == "ok"){
									_store.insert(0,new JOB({job:text}));
									this.setValue(text);
								}
							},_job);
						}
					},{
						xtype:"button",
						text:"修改职位",
						handler:function(){
							var _job = _window.findByType("combo")[1];
							if(_job["selectItem"]!= null){
							Ext.Msg.prompt("请输入修改后的职位名称","职位名称",function(btn,text){
								this["selectItem"].set("job",text);
								this.setValue(text);								
							},_job,false,_job.getValue())
							}
						}
					
					},{
						xtype:"button",
						text:"删除职位",
						handler:function(){
							var _job = _window.findByType("combo")[1];
							Ext.MessageBox.confirm("系统提示","你确认删除当前职位吗?",function(btn){
								if(btn == "yes"){
									try{
									this.store.remove(this["selectItem"]);
									}catch(_err){}
									if(this.store.getCount() != 0){
										this.setValue(this.store.getAt(0).get("job"));
										this["selectItem"] = this.store.getAt(0);
									}else{
										this.setValue("");
									
									}
								}
								
							},_job)
						}
					
					}]
					}]
				}
			]
		}],
		buttons:[{
			text:"确定"
		},{
			text:"取消"
		}],
		allowlock:false,//自定义属性
		listeners:{
			"show":function(){
				if(! _window["allowlock"]){
				_window.findByType("textfield")[7].getEl().dom.src="images/default.jpg";
				_window["allowlock"] = true
				}
				var _job = _window.findByType("combo")[1];
				var _store = _job.store;
				_job.setValue(_store.getAt(0).get("job"));
				_job["selectItem"] = _store.getAt(0);
			}
		}
	});
	_window.show();
});

个人感觉Ext的布局特别像java swing的布局方式。