dieslrae
dieslrae
2010-01-13 12:09

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

已采纳

最近在学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里面又没有问题,不存在多次执行操作的问题

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • CaiHuajiang CaiHuajiang 11年前

    [code="java"]# {

    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

    }[/code]

    这里handler就是点击弹开添加面板的。每当点开一次就执行了一次this.InsertWindow.on("submit",function(){});方法,
    那么点三次,就会触发三次submit事件。
    解决办法将该on submit方法放到handler事件外面。或将submit事件放到InsertWindow面板中去

    点赞 评论 复制链接分享
  • CaiHuajiang CaiHuajiang 11年前

    不知道你怎么试的,可以肯定是事件冒泡了,原因也说了,我想够清楚了。

    点赞 评论 复制链接分享
  • xkuff xkuff 11年前

    [code="java"]

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

    }

    });

    });

    [/code]
    把这段代码注释,然后把Ext.Ajax.request({});那段代码放到onSubmitClick:function(){ 里。

    点赞 评论 复制链接分享
  • wanghaolovezlq wanghaolovezlq 11年前

    Ext.getCmp("grid").getStore().add(

    new Ext.data.Record(Ext.util.JSON.decode(_response.responseText)));

    这个地方注意下,可能是add导致的

    点赞 评论 复制链接分享

相关推荐