extjs学习07——extjs的初级UI设计4(Window实例改进)

extjs学习07——extjs的初级UI设计4(Window实例改进)学习自dojo china陈治文老师的extjs视频教程本篇日志是对视频章节的小结Ext.onReady(function(){var JOB = Ext.data.Record.create([{name:"job"}]);new Ext.Window({title:"添加人员",width:500,height:350,plain:true,layout:"form",labelWidth:59,defaultType:"textfield",defaults:{anchor:"95%"},//锚点,按百分比分配布局大小/**这个布局将子元素的位置与父容器大小进行关联固定. 如果容器大小改变, 所有固定的子项将按各自的anchor 规则自动被重新渲染固定.*//** 第一层布局元素：panel、textfield和buttons*/items:[{xtype:"panel",baseCls:"x-plain",layout:"column",/** 第二层布局元素：两个对半分的panel*/items:[{columnWidth:5,style:"padding:5px";layout:"form",labelWidth:55,defaultType:"textfield",defaults:{width:160},baseCls:"x-plain",/** 第三层布局元素：textfield*/items:[{fieldLabel:"姓名"},{fieldLabel:"年龄",value:28},{xtype:"datefield",format:"Y-m-d",//设置日期格式value:"1981-10-18",//设置初始值readOnly:true,//只能选择，不能书写fieldLabel:"出生日期",listeners:{"blur":function(_df){var _age = _df.ownerCt.findByType("textfield")[1];_age.setValue(new Date().getFullYear()-_df.getFullYear()+1);}}/**提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项。这个表单项识别并使用JavaScript的日期对象作为其value类型。 另外， 它根据format 和/或 altFormats配置来识别输入的字符串值。这些可以被用来配置使时间格式符合用户的使用场景。该表单项可以通过使用minValue, maxValue, disabledDays, and disabledDates 配置来限制时间在一定的范围内。这些配置被同时用来对表单项进行验证， 并且日期选择器可以防止选择无效的日期。*/},{fieldLabel:"联系电话"},{fieldLabel:"手机号码"},{fieldLabel:"电子邮件"},{xtype:"combo",//下拉条fieldLabel:"性别",mode:"local",//store的模式displayField:"sex",//相关的数据域名称绑定到ComboBoxreadOnly:true,triggerAction:"all",/**触发器被点击时执行的操作。'all' :指定allQuery配置项执行查询'query' :使用原始值执行查询*/value:"男",store:new Ext.data.SimpleStore({//本地模式(临时数据存储器)，默认是服务器模式fields:["sex"],data:[["男"],["女"]]})/**ComboBox控件支持自动完成、远程加载、和许多其他特性。ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合； 用户可以自由的在域中键入，或从下拉选择列表中选择值。默认用户可以输入认可值，即使它没有出现在选择列表中； 设置forceSelection为“true”，以阻止自由格式的值，并将其限制在列表中的项。选择列表中的项是从任何Ext.data.Store（包括远程store）填充。 store中的数据项被分别映射在每个选项的显示文本和隐藏值，通过valueField和displayField配置。如果store非远程，例如：仅依靠本地数据并从前端被加载，应该确保设置queryMode为“'local'”， 因为这样会给用户提高相应。*/}]/** 第三层布局元素：textfield*/},{columnWidth:5，layout:"form",labelWidth:55,baseCls:"x-plain",items:{xtype:"textfield",fieldLabel:"个人照片",width:170,height:177,inputType:"image"}}]/** 第二层布局元素：两个对半分的panel*/},{fieldLabel:"身份证号"width:400//若采用anchor，此设置无效},{fieldLabel:"具体地址"width:400},{xtype:"panel",layout:"column",baseCls:"x-plain",//本身的背景色defaults:{baseCls:"x-plain"},//下面子元素的背景色items:[{columnWidth:.5,layout:"form",labelWidth:55,items:{xtype:"combo",fieldLabel:"职位"anchor:"100%",mode:"local",displayField:"job",readOnly:true,triggerAction:"all",listeners:{select:function(_combo,_record,_index){_combo["selectItem"]=_record;}}store:new Ext.data.SimpleStore({fields:["job"],data:[["程序员"],["工程师"],["主管"],["经理"]]})//一般来说，给对象填充构造参数其实是把这些属性合并到对象中去//所以下文可以使用_job.store的形式来获取store}},{columnWidth:.4,style:"padding:0 0 0 5px",//调节内间距是对按钮外层的组件进行设置，而不是按钮/**padding: 为所有当前布局管理的子项('items')设置padding值.此属性可以用一组空格分隔的数值所组成的字符串定义. 数值关联边框的顺序和CSS处理padding的规则一致:如果只有一个值, 则应用到所有边框.如果有两个值, 则上下边框设置为第一个值, 左右设为第二个值.如果有三个值, 则上边框使用第一个, 左右边框使用第二个, 下边框使用第三个.如果有四个值, 则分别依次应用于上,右,下,左.*/items:{xtype:"button",text:"添加职位",handler:function(){//尽量把变量约束在一个函数内，否则容易造成命名混乱//注意当前对象this和主容器的嵌套关系var _window = this.ownerCt.ownerCt.ownerCt;var _job = _window.findByType("combo")[1];Ext.MessageBox.prompt("请输入职位名称","职位名称",function(_btn,_text){if(_btn=="ok"){var _store = this.store;_store.insert(0,new JOB({job:_text}));/**insert( Number index, Ext.data.Model[] records )从给定的索引处开始,插入 Model 实例;并触发 add 事件.add( Ext.data.Model[]/Ext.data.Model... model ) : Ext.data.Model[]添加 Model 实例到 Store. 本方法接收的参数可以是:由 Model 实例 或者是 Model 配置对象 组成的数组.任意数量的 Model 实例 或者是 Model 配置对象;(可以是多个参数的情况).新的 Model 实例将被添加到已存在的数据集合末尾.*/this.setValue(_text);this["selectItem"]=_store.getAt(0);}},_job);//_job充当函数里的this，作为作用域/**prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] ) :显示一个带有“确定”和“取消”按钮，提供用户输入一些文本的消息盒子(类似于JavaScript的提示)。 提示可以是一个单行或者多行的文本框。 如果传了一个回调函数，它将会在用户点击其中一个按钮后被调用， 被点击的按钮的id(也可能是右上角的关闭按钮，这将始终报告为“取消”)和输入的文本将会作为回调函数的两个参数被传递。*/}}},{columnWidth:.2,items:{xtype:"button",text:"修改职位",handler:function(){var _window = this.ownerCt.ownerCt.ownerCt;var _job = _window.findByType("combo")[1];if(_job["selectItem"] != null)Ext.MessageBox.prompt("请输入修改后的职位名称","职位名称",function(_btn,_text){if(_btn == "ok"){this["selectItem"].set("job",_text);this.setValue(_text);}},_job,false,_job.getValue());}}},{culumnWidth:.2,items:{xtype:"button",text:"删除职位",handler:function(){var _window = this.ownerCt.ownerCt.ownerCt;var _job = _window.findByType("combo")[1];if(_job["selectItem"] != null)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("");this["selectItem"]=null;}}});}}}]}],showLock:false,listeners:{"show":function(_window){if(!_window["showLock"]){_window.findByType("textfield")[5].getEl().dom.src="default_pic.gif";//与之前版本相比，因为之前字段更改了类型，所以图片作为textfield的序号也在改变_window["showLock"]=true;}var _job = _window.findByType("combo")[1];var _store = _job.store;_job.setValue(_store.getAt(0).get("job"));/**获取指定index处的记录.返回：传入index处的记录Record. 如果没有找到则返回 undefined*/_job["selectItem"]=_store.getAt(0);}}buttons:[{//按数组形式访问text:"确定",handler:function(){alert(this.ownerCt.buttons[1].text);}},{text:"取消"}]/** 第一层布局元素：panel、textfield和buttons*/}).show();});