最近遇到一个Ext.Ajax.request的奇怪问题

2019-03-25 13:41|来源: 网路

最近在学Extjs,照着视频做了一个提交数据并且添加store的demo,却遇到一个奇怪的问题:添加第一次的时候没有问题,添加第二次的时候就向服务器发了2次请求,添加第3次的时候就向服务器发了3次请求,导致了,第二次添加了2个相同的,第三次添加了3个相同的,请大家帮我看下是哪有写得有问题
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);
});



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


问题补充:
回复1楼,如果我把Ext.Ajax.request注掉,直接把record add到store里面又没有问题,不存在多次执行操作的问题

相关问答

更多