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",//相关的数据域名称绑定到ComboBox
					readOnly: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();
});