ExtJs之窗口样式实现
大概学习了下Ext的技术，写了一个下图样子的东西，看看应该还不错，布局各方面还算可以，再次记录下，以便日后查用！
?下面直接上代码：
?
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的布局方式。