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();
});