Ext中FormPanel的用法 1.0

Ext.onReady(function(){
  //校验
  Ext.applyIf(Ext.form.VTypes,{
  name:function(_v){
  return /^[a-z]{3}$/.test(_v);
  },
  nameText:"必须是3到5个汉字",
  nameMask:/[a-z]/i
  });
 
  var _create = Ext.data.Record.create([
  {name:'job',mapping:'job'}
  ]);
  new Ext.FormPanel({
  title:'人员信息',
  renderTo:Ext.getBody(),
  width:500,
  height:400,
  x:500,
  y:400,
  plain:true,
  layout:'form',
  frame:true,
  waitMsgTarget:true,
  items:[{
  baseCls:'x-plain',
  layout:'column',
  style:'padding:5px',
  items:[{
  baseCls:'x-plain',
  columnWidth:0.5,
  defaultType:'textfield',
  layout:'form',
  labelWidth:65,
  defaults:{width:160},
  items:[{
  fieldLabel:'姓名',
  emptyText:'请输入姓名',
  name:'name',
  vtype:'name'
  },{
  fieldLabel:'年龄',
  emptyText:'年龄在0~150之间'
  },{
  fieldLabel:'出生日期',
  format:'Y-m-d',
  xtype:'datefield',
  readonly:true
  },{
  fieldLabel:'所在城市'
  },{
  fieldLabel:'QQ号码'
  },{
  fieldLabel:'Email-e',
  name:'email'
  },{
  fieldLabel:'性别',
  xtype:'combo',
  mode:'local',
  displayField:'sex',
  readonly:true,
  triggerAction:'all',
  value:'男',
  store:new Ext.data.ArrayStore({
  fields:['sex'],
  data:[['男'],['女']]
  })
  }]                    
  },{
  baseCls:'x-plain',
  columnWidth:0.5,
  defaultType:'textfield',
  layout:'form',
  labelWidth:55,
  items:[{
  fieldLabel:'我的照片',
  inputType:'image',
  width:170,
  height:183
  }]
  }]
  },{
  style:'padding:5px',
  baseCls:'x-plain',
  defaultType:'textfield',
  layout:'form',
  defaults:{width:395},
  labelWidth:67,
  items:[{
  fieldLabel:'身份证号码'
  },{
  fieldLabel:'具体所在地'
  },{
  xtype:'panel',
  baseCls:'x-plain',
  layout:'column',
  items:[{
  columnWidth:0.4,
  layout:'form',
  labelWidth:67,
  baseCls:'x-plain',
  items:[{
  xtype:'combo',
  fieldLabel:'职位',
  displayField:'job',
  mode:'local',
  triggerAction:'all',
  anchor:'100%',
  store:new Ext.data.ArrayStore({
  fields:['job'],
  data:[['初级工程师'],['中级工程师'],['高级工程师']]
  }),
  listeners:{
  'select':function(_combo,_record,_index){
 
  this['selectItem'] = this.getValue();
  }
  }
  }]
  },{
  columnWidth:0.2,
  baseCls:'x-plain',
  style:'padding:0 0 0 15px',
  items:[{
  xtype:'button',
  text:'添加职位',
  handler:function(){
 
var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;

var _job = _win.findByType('combo')[1];

var _store = _job.store;

  Ext.MessageBox.prompt("请输入要添加的职位","职位添加",function(_btn,_text){
 
  if(_btn == 'ok'){
  _store.insert(0,new _create({job:_text}));
 
  _job.setValue(_text);
 
  _job['selectItem'] = _text;
  }
  });
  }
  }]
  },{
  columnWidth:0.2,
  baseCls:'x-plain',
  style:'padding:0 0 0 15px',
  items:[{
  xtype:'button',
  text:'修改职位',
  handler:function(){
 
  var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;

var _job = _win.findByType('combo')[1];

var _store = _job.store;

var _value = _job.getValue();

Ext.MessageBox.prompt("输入你要修改后的职位","修改职位",function(_btn,_text){

if(_job.getValue() == null || _job.getValue() == ''){

alert('没有要修改的数据');
return '';
}
if(_btn == 'ok'){

var _index = _store.find('job',_value);

_store.getAt(_index).set('job',_text);

this.setValue(_text);
}
},_job,false,_value);
  }
  }]
  },{
  columnWidth:0.2,
  baseCls:'x-plain',
  style:'padding:0 0 0 15px',
  items:[{
  xtype:'button',
  text:'删除职位',
  handler:function(){
 
  var _win = this.ownerCt.ownerCt.ownerCt.ownerCt;

var _job = _win.findByType('combo')[1];

var _store = _job.store;

var _value = _job['selectItem'];

Ext.MessageBox.confirm('提示','确定删除当前职位吗?',function(_btn){

if(_job.getValue() == null || _job.getValue() == ''){

Ext.MessageBox.alert('error','没有可删除的数据');
}
if(_btn == 'yes'){

var _index = _store.find('job',_value);

_store.remove(_store.getAt(_index));

if(_store.getCount()>0){

this['selectItem'] = _store.getAt(0).get('job');

this.setValue(_store.getAt(0).get('job'));
}else{

this.setValue('');

this['selectItem'] == null;
}
}
},_job);
  }
  }]
  }]
  }]
  }],
  buttons:[{
  text:'确定',
  handler:function(){
  this.ownerCt.ownerCt.getForm().submit({waitTitle:'提交',waitMsg:'loading...'});
  }
  },{
  text:'载入'
  },{
  text:'取消',
  handler:function(){
  this.ownerCt.ownerCt.getForm().reset();
  }
  }],
  listeners:{
  'show':function(_win){
 
  var img = _win.findByType('textfield')[7];
 
  img.getEl().dom.src='picture/http_imgload.jpg';
 
  var _job = _win.findByType('combo')[1];
 
  var _value = _job.store.getAt(0).get('job');
 
  _job.setValue(_value);
 
  _job['selectItem'] = _value;
  }
  }
  }).show();
  });