ExtJS学习笔记八，复杂页面功能实现

<script type='text/javascript'>
	Ext.onReady(function(){
		
		//定义Record模板，用的时候要使用new Job({job:""})
		var JOB = Ext.data.Record.create([{
			name:"job"
		}]);
		new Ext.Window({
			title:"添加人员",
			width:500,
			height:345,
			plain:true,
			layout:"form",
			//defaults:{anchor:"95%"},//锚点布局，就是随着窗体大小而改变---紧靠
			labelWidth:55,
			defaultType:"textfield",
			bodyStyle:"padding:5px",
			//style:"padding:5px",
			items:[{
				xtype:"panel",
				//设置背景色和容器颜色一致
				baseCls:"x-plain",
				layout:"column",
				items:[{
					columnWidth:0.5,
					baseCls:"x-plain",
					layout:"form",
					defaultType:"textfield",
					defaults:{width:160},
					labelWidth:55,
					items:[{
						fieldLabel:"姓名"
					},{
						fieldLabel:"年龄",
						//我们要根据出生日期自动算出
						value:28,
						readOnly:true
					},{
						xtype:"datefield",
						fieldLabel:"出生日期",
						//mdy模式匹配符
						//在Date类中罗列了很多日期格式
						format:"Y-m-d", //这个是用的最多的2000-08-00
						//value:new Date()
						value:"1982-09-02",//要符合format的哦
						readOnly:true,//只能选择不能输入
						listeners:{
							"change":function(_df){
								var age =  _df.ownerCt.findByType("textfield")[1];
								//alert(_df.getValue().getFullYear());
								age.setValue(new Date().getFullYear()-_df.getValue().getFullYear());
							}
						}
					},{
						fieldLabel:"联系电话"
					},{
						fieldLabel:"手机号码"
					},{
						fieldLabel:"电子邮件"
					},{
						//这个控件在form里面算是最复杂的
						fieldLabel:"性别",
						xtype:"combo",
						//simpleStore默认的阅读器是arrayReader
						//本地模式
						mode:"local",//default:remote--远程
						displayField:"sex",//valueField
						readOnly:true,
						triggerAction:"all",//query
						store:new Ext.data.SimpleStore({
							fields:["sex"],
							data:[["男"],["女"]]
						
						})
					}]
				},{
					columnWidth:0.5,
					baseCls:"x-plain",
					layout:"form",
					labelWidth:55,
					items:{
						xtype:"textfield",
						inputType:"image",
						fieldLabel:"个人照片",
						width:170,
						height:170
					}
				}]
			},{
				fieldLabel:"身份证号",width:400
			},{
				fieldLabel:"具体地址",width:400
			},{
				xtype:"panel",
				layout:"column",
				baseCls:"x-plain",
				items:[{
					columnWidth:0.4,
					layout:"form",
					baseCls:"x-plain",
					labelWidth:55,
					items:{
						xtype:"combo",
						fieldLabel:"职位",
						anchor:"100%",
						mode:"local",//default:remote--远程
						displayField:"job",//valueField
						readOnly:true,
						triggerAction:"all",//query
						store:new Ext.data.SimpleStore({
							fields:["job"],
							data:[["程序员"],["工程师"],["主管"]]
						}),
						listeners:{
							"select":function(_combo,_record,_index){
								_combo["selectItem"] = _record;
							}
						}
					}
					//xtype="combo"
				},{
					columnWidth:0.2,
					layout:"form",
				    baseCls:"x-plain",
				    bodyStyle:"padding-left:10px",
					items:{
						xtype:"button",
						text:"添加职位",
						handler:function(){
							//第一个是panel，第二个到panel，第三个到window
							var _window = this.ownerCt.ownerCt.ownerCt;
							var _job = _window.findByType("combo")[1];
							Ext.MessageBox.prompt("请输入职位名称","职位名称",function(_btn,_text){
								if(_btn == "ok"){
									if(_text != ""){
										var _store = this.store;
										_store.insert(0,new JOB({job:_text}));
										
										this.setValue(_text);
										this["selectItem"] = this.store.getAt(0);
									}
								}
							},_job);
						}
					}
				},{
					columnWidth:0.2,
					baseCls:"x-plain",
					items:{
						xtype:"button",
						text:"修改职位",
						handler:function(){
							//第一个是panel，第二个到panel，第三个到window
							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"){
									if(_text != ""){
										this["selectItem"].set("job",_text);
										this["selectItem"] = this.store.getAt(0);
										this.setValue(_text);
									}
								}
							},_job,false,_job.getValue());
						}
					}
				},{
					columnWidth:0.2,
					baseCls:"x-plain",
					items:{
						xtype:"button",
						text:"删除职位",
						handler:function(){
							//第一个是panel，第二个到panel，第三个到window
							var _window = this.ownerCt.ownerCt.ownerCt;
							var _job = _window.findByType("combo")[1];
							if(_job["selectItem"] != null)
							Ext.MessageBox.confirm("系统提示","删除当前职位吗",function(_btn){
								if(_btn == "yes"){
									this.store.remove(this["selectItem"]);
									if(this.store.getCount() != 0){
										this.setValue(this.store.getAt(0).get("job"));
										this["selectItem"] = this.store.getAt(0);
									}else{
										this["selectItem"] = null;
										this.setValue("");
									}
								}
							},_job);
						}
					}
				}]
			}],
			boo:false,//用于只加载一次--这个是自己随便设置的参数，就一个boolean类型的参数
			listeners:{
				"show":function(_window){
					//得到Ext中元素对象
					if(!_window["boo"]){
						//alert(0);
						_window.findByType("textfield")[5].getEl().dom.src="zhao.jpg";
						_window["boo"]=true;
					}
					
					var _job = _window.findByType("combo")[0];
					var _store = _job.store;
					//_store.getAt(0) --record,得到一条记录
					_job.setValue(_store.getAt(0).get("sex"));
					
					_job = _window.findByType("combo")[1];
					_store = _job.store;
					_job.setValue(_store.getAt(0).get("job"));
					_job["selectItem"] = _store.getAt(0);
				}
			},
			buttons:[{
				text:"确定",
				//buttons也是一个集合
				handler:function(){
					alert(this.ownerCt.buttons[1].text);
				}
			},{
				text:"取消"
			}]
		}).show();
	})
</script>