关于Ext中重复加载的有关问题！即增加和修改使用同一个Form
关于Ext中重复加载的问题！即增加和修改使用同一个Form
最近在写Ext的程序，增加和修改时，打算使用同一个Form，增加和修改的Widow通过hide 和show来控制显示 ，
但是出现了一个问题，在网上查了半天，终于解决了，原来是Form中字段设置了id，把id取消就好了，参考网址
http://topic.csdn.net/u/20100618/11/a09196cc-550b-41e2-9e19-1c331d54aa1c.html
var STUDENT=Ext.data.Record.create([
{name:"sid",type:"string"},
{name:"sname"},
{name:"birthday",type:"string"},//type:"date",dataFormat:"Y-m-d"},
{name:"city",type:"string"},
{name:"stature",type:"int"}
]);
Ext.apply(Ext.form.VTypes, {
LengthLimit: function(v) {
return v.length <=10
},
LengthLimitText: "字符串长度不能大于10",
IntLimit:function(v){
return v <300;
},
IntLimitText:"身高不能大于300"
});
/********************
*表格，显示人员信息，继承自Ext.grid.GridPanel
*
********************/
StudentListGrid=Ext.extend(Ext.grid.GridPanel,{
_store:null,
_tbar:null,
_addWin:null,
_updateWin:null,
constructor:function(){
this._store=new Ext.data.JsonStore({
autoLoad:true,
url : "grid_service.jsp?action=getAllStudents",
root:"rows",
id:"id",
fields:STUDENT,
sortInfo:{field: "sid", direction: "DESC"}
});
this._tbar=new Ext.Toolbar({
id:"mainMenu",
items:["-",
{
text:"增加用户",
id:"addBtn",
iconCls:"adduser",
handler:function(){
this._addWin.show();
this._addWin._form.getForm().reset();
},
scope:this
},"-",
{
text:"修改用户",
id:"updateBtn",
iconCls:"modifyuser",
handler:this.updateFn,
scope:this
},"-",
{
text:"删除用户",
id:"delBtn",
iconCls:"deleteuser",
handler:this.deleteFn,
scope:this
},"-","->",
{
xtype:"textfield",
fieldLabel:"请输入姓名",
id:"searchName",
width:100,
emptyText:"-请输入姓名"
},"-",{
text:"搜索",
width:50,
iconCls:"search",
handler:this.searchFn,
scope:this
},"-"
]
});
this._addWin=new AddNewStudentWindow();
this._updateWin=new UpdateStudentWindow();
StudentListGrid.superclass.constructor.call(this,{
title:"学生列表",
renderTo:Ext.getBody(),
id:"main_grid",
frame:true,
height:300,
width:500,
tbar:this._tbar,
store:this._store,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
columns:[
{header:"SID",dataIndex:"sid",hidden:true},
{header:"姓名",dataIndex:"sname"},
{header:"生日",dataIndex:"birthday",renderer:this.birthdayFn},
{header:"所在城市",dataIndex:"city"},
{header:"身高",dataIndex:"stature"}
]
});
},
birthdayFn:function(value){
if(typeof(value)=="string")
return value.substring(0,10);
else
return Ext.util.Format.date(value,"Y-m-d");
},
updateFn:function(){
var sm=this.getSelectionModel();
if(sm.getCount() == 0) {
Ext.Msg.show({
title : '注意!',
msg : '请选择需要修改的学生!',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK
});
return;
}
var _record=sm.getSelected();
if(_record.data.birthday.length>=10)
_record.data.birthday=_record.data.birthday.substring(0,10);
this._updateWin._form.getForm().loadRecord(_record);
this._updateWin.show();
},
deleteFn:function(){
},
searchFn:function(){
}
});
/*******************************************
*增加人员和修改人员时所用到的Form,继承自Ext.form.FormPanel
*
*
****************************************/
StudentFormPanel=Ext.extend(Ext.form.FormPanel,{
constructor:function(){
StudentFormPanel.superclass.constructor.call(this,{
width:340,
frame:true,
plain:true,
layout:"form",
labelWidth:60,
labelAlign:'right',
items:[
{ xtype:"hidden",
fieldLabel:"id",
id:"sid",
value:"",
width:200},
{
xtype:"textfield",
fieldLabel:"姓 名",
vtype:"LengthLimit",
id:"sname",
value:"",
width:200
},
{
xtype:"datefield",
fieldLabel:"生 日",
id:"birthday",
width:200,
format:"Y-m-d",
editable:false,
value:new Date()
},
{
xtype:"textfield",
fieldLabel:"所在城市",
id:"city",
width:200,
value:""
},
{
xtype:"textfield",
fieldLabel:"身 高",
id:"stature",
width:200,
vtype:"IntLimit",
value:""
}
]
});
}
});
/*************************************
*增加用户是的弹出窗口，继承自Ext.Window
*
**************************************/
AddNewStudentWindow=Ext.extend(Ext.Window,{
_form:null,
constructor:function(){
this._form=new StudentFormPanel();//这里新建了FormPanel
AddNewStudentWindow.superclass.constructor.call(this,{
title:"增加用户",
width:350,
frame:true,
plain:true,
closeAction:"hide",
autoDestroy:true,
[color=#FF0000]items:[this._form],[/color]
modal:true,
buttons:[
{text:"保存",
iconCls:"sure",
handler:this.sureFn,
scope:this},
{text:"重置",
iconCls:"reset",
handler:this.resetFn,
scope:this},
{text:"关闭",
iconCls:"close",
handler:this.closeFn,
scope:this}
]
});
},
sureFn:function(){
},
resetFn:function(){
},
closeFn:function(){
this.hide();
}
});
/*****************************
*更新用户时调用的窗口
*
******************************/
UpdateStudentWindow=Ext.extend(Ext.Window,{
_form:null,
constructor:function(){
this._form=new StudentFormPanel();//新建FormPanel
UpdateStudentWindow.superclass.constructor.call(this,{
title:"修改用户",
width:350,
frame:true,
plain:true,
closeAction:"hide",
autoDestroy:true,
[color=#FF0000]items:[this._form],[/color]
modal:true,
buttons:[
{text:"保存",
iconCls:"sure",
handler:this.sureFn,
scope:this},
{text:"重置",
iconCls:"reset",
handler:this.resetFn,
scope:this},
{text:"关闭",
iconCls:"close",
handler:this.closeFn,
scope:this}
]
});
},
sureFn:function(){
},
resetFn:function(){
},
closeFn:function(){
this.hide();
}
});