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>