最近在学Extjs,照着视频做了一个提交数据并且添加store的demo,却遇到一个奇怪的问题:添加第一次的时候没有问题,添加第二次的时候就向服务器发了2次请求,添加第3次的时候就向服务器发了3次请求,导致了,第二次添加了2个相同的,第三次添加了3个相同的,请大家帮我看下是哪有写得有问题
[code="js"]
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
PersonViewFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
PersonViewFormPanel.superclass.constructor.call(this,{
id:"form",
layout:"form",
defaultType:"textfield",
baseCls:"x-plain",
style:"padding:5px",
defaults:{width:175},
width:240,
height:85,
labelWidth:45,
items:[
{fieldLabel:"姓名",id:"name"},
{fieldLabel:"性别",id:"sex"},
{fieldLabel:"年龄",id:"age"}
]
});
}
});
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
PersonInfoFormPanel.superclass.constructor.call(this,{
layout:"form",
id:"info_form",
defaultType:"textfield",
baseCls:"x-plain",
bodyStyle:"padding:5px",
defaults:{width:150},
width:240,
height:85,
labelWidth:45,
items:[
{fieldLabel:"姓名",id:"name",allowBlank:false,blankText:"姓名必须填写!",emptyText:"必填"},
{
xtype:"combo",
fieldLabel:"性别",
emptyText:"请选择",
hiddenName:"sex",
displayField:"name",
valueField:"value",
triggerAction:"all",
mode:"local",
readOnly:true,
store:new Ext.data.JsonStore({
fields:["value","name"],
data:[{value:0,name:"男"},{value:1,name:"女"}]
})
},
{fieldLabel:"年龄",id:"age"}
]
});
},
getValues:function(){
if(this.getForm().isValid())
return new Ext.data.Record(this.getForm().getValues());
else
throw Error("表单验证未通过!");
},
setValues:function(_record){
this.getForm().loadRecord(_record);
},
reset:function(){
this.getForm().reset();
}
});
InsertPersonInfoWindow = Ext.extend(Ext.Window,{
form:null,
constructor:function(){
this.form = new PersonInfoFormPanel();
InsertPersonInfoWindow.superclass.constructor.call(this,{
title:"添加人员",
closeAction:"hide",
height:155,
width:240,
modal:true,
plain:true,
resizable:false,
items:this.form,
buttons:[
{
text:"确定",
handler:function(){
this.onSubmitClick();
},
scope:this
},{
text:"取消",
handler:function(){
this.onCancelClick();
},
scope:this
}
]
});
this.addEvents("submit");
},
close:function(){
this.form.reset();
this.hide();
},
onSubmitClick:function(){
try{
this.fireEvent("submit",this,this.form.getValues());
}catch(e){
Ext.Msg.alert("错误",e);
}
},
onCancelClick:function(){
this.close();
}
});
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel,{
InsertWindow:null,
constructor:function(){
this.InsertWindow = new InsertPersonInfoWindow();
PersonListGridPanel.superclass.constructor.call(this,{
id:"grid",
width:240,
autoHeight:true,
tbar:[
{
text:"添加",
handler:function(){
this.InsertWindow.show();
this.InsertWindow.on("submit",function(_window,_record){
Ext.Ajax.request({
url:"test5.pfv",
params:_record.data,
success:function(_response){
Ext.getCmp("grid").getStore().add(
new Ext.data.Record(Ext.util.JSON.decode(_response.responseText)));
_window.close();
}
});
});
},
scope:this
},"-",
{text:"修改"},"-",
{text:"删除"}
],
columns:[
{header:"姓名",dataIndex:"name",width:80},
{header:"性别",dataIndex:"sex",width:80},
{header:"年龄",dataIndex:"age",width:80}
],
store:new Ext.data.JsonStore({
autoLoad:true,
fields:["name","sex","age"],
url:"test4.pfv"
}),
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
"rowselect":{
fn:function(_rsm,_index,_record){
this.fireEvent("rowselect",_record);
},
scope:this
}
}
})
});
this.addEvents("rowselect");
}
});
Ext.onReady(function(){
var _grid = new PersonListGridPanel();
// var _form = new PersonViewFormPanel();
var _window = new Ext.Window({
renderTo:Ext.getBody(),
title:"测试组件化编程",
resizable:false,
plain:true,
frame:true,
items:[
_grid
]
});
_window.show();
// _grid.on("rowselect",function(_record){
// this.getForm().loadRecord(_record);
// },_form);
});
[/code]
[code="java"]
@RequestMapping(value="/test5.pfv")
public void test5(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
Map<String, String> map = new HashMap<String, String>();
map.put("name", name);
map.put("sex", "0".equals(sex)?"男":"女");
map.put("age", age);
JSON json = JSONObject.fromObject(map);
json.write(response.getWriter());
[/code]
[b]问题补充:[/b]
回复1楼,如果我把Ext.Ajax.request注掉,直接把record add到store里面又没有问题,不存在多次执行操作的问题