日期:2014-05-16 浏览次数:20450 次
大概学习了下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(""); } } },