ext在组件化设计的时候formpanel重用的问题

Question

才学extjs没多久，js也不是太好，自己试着做了个例子，发现有点问题，如图
[img]http://dl.iteye.com/upload/attachment/194645/de7a5b07-eb40-3258-807a-cc3e1659d49b.jpg[/img]
点击insert就弹出insert的window,这个时候没有问题，进行操作，或者点击cancel后，再点update就变成这样了

[img]http://dl.iteye.com/upload/attachment/194647/9a4b55df-0890-3c10-8973-28a82bbff418.jpg[/img]
应为两个window里的formpanel都是同一个，但是在每个window里panel都是new出来的

[code="js"]
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
this.addEvents("insert");
this.addEvents("update");

    PersonInfoFormPanel.superclass.constructor.call(this,{
        layout:"form",
        defaultType:"textfield",
        bodyStyle:"padding:5px",
        baseCls:"x-plain",
        autoHeight:true,
        defaults:{width:135},
        width:220,
        labelWidth:45,
        items:[
            {
                fieldLabel:"name",
                name:"name",
                id:"name",
                emptyText:"name is not null",
                blankText:"name is not null",
                allowBlank:false
            },{
                fieldLabel:"age",
                name:"age",
                id:"age",
                emptyText:"age is not null",
                blankText:"age is not null",
                allowBlank:false
            },{
                xtype:"combo",
                fieldLabel:"sex",
                name:"sexMc",
                id:"sexMc",
                hiddenName:"sexDm",
                displayField:"sexMc",
                valueField:"sexDm",
                mode:"local",
                triggerAction:"all",
                emptyText:"sex is not null",
                blankText:"sex is not null",
                allowBlank:false,
                editable:false,
                store:new Ext.data.JsonStore({
                    fields:["sexMc","sexDm"],
                    data:[
                        {sexMc:"men",sexDm:1},
                        {sexMc:"women",sexDm:2}
                    ]
                })
            }
        ]
    });
},

setValues:function(_record){
    this.getForm().loadRecord(_record);     
},

getValues:function(){
    if(this.getForm().isValid())
        return this.getForm().getValues();
    else
        throw Error();
},

onInsert:function(){
    try{
        this.fireEvent("insert",this,this.getValues())
    }catch(e){
        return;
    }
},

onUpdate:function(){
    try{
        this.fireEvent("update",this,this.getValues())
    }catch(e){
        return;
    }
}

});

PersonViewGridPanel = Ext.extend(Ext.grid.GridPanel,{

insertWin:null,
updateWin:null,

constructor:function(){
    this.insertWin = new InsertPersonInfoWindow();
    this.updateWin = new UpdatePersonInfoWindow();

    PersonViewGridPanel.superclass.constructor.call(this,{
        autoHeight:true,
        width:240,
        columns:[
            {header:"name",dataIndex:"name",width:80},
            {header:"age",dataIndex:"age",width:80},
            {header:"sex",dataIndex:"sexMc",width:80},
            {dataIndex:"sexDm",hidden:true}
        ],
        tbar:[
            {
                text:"insert",
                handler:function(){
                    this.insertWin.show();
                },
                scope:this
            },"-",{
                text:"update",
                handler:function(){
                    if(this.getSelectionModel().getCount()==1){
                        this.updateWin.show();
                        this.updateWin.form.setValues(this.getSelectionModel().getSelected());
                    }
                },
                scope:this
            },"-",{
                text:"delete",
                handler:function(){
                    var _record = this.getSelectionModel().getSelected();

                    Ext.Ajax.request({
                        url:"test8.pfv",
                        params:_record.data,
                        success:function(){
                            this.getStore().remove(_record);
                        },
                        scope:this
                    }); 
                },
                scope:this
            }
        ],
        store:new Ext.data.JsonStore({
            autoLoad:true,
            url:"test7.pfv",
            fields:["name","age","sexMc","sexDm"]
        }),
        sm:new Ext.grid.RowSelectionModel({
            singleSelect:true
        })
    });

    this.insertWin.form.on("insert",function(_form,_values){
        _form.getForm().submit({
            url:"test8.pfv",
            success:function(_f,_a){
                this.getStore().add(new Ext.data.Record(_a.result));

                this.insertWin.hide();
                this.insertWin.form.getForm().reset();
            },
            scope:this
        });
    },this);

    this.updateWin.form.on("update",function(_form,_values){
        _form.getForm().submit({
            url:"test8.pfv",
            success:function(_f,_a){
                var _value = _a.result;
                var _record = this.getSelectionModel().getSelected();

                for(var _key in _value){
                    _record.set(_key,_value[_key]);
                }

                _record.commit();

                this.updateWin.hide();
                this.updateWin.form.getForm().reset();
            },
            scope:this
        });
    },this);
}

});

PersonViewWindow = Ext.extend(Ext.Window,{

grid:null,

constructor:function(){
    this.grid = new PersonViewGridPanel();

    PersonViewWindow.superclass.constructor.call(this,{
        title:"测试组件化编程",
        resizable:false,
        items:this.grid
    });
}

});

InsertPersonInfoWindow = Ext.extend(Ext.Window,{

form:null,

constructor:function(){
    this.form = new PersonInfoFormPanel();

    InsertPersonInfoWindow.superclass.constructor.call(this,{
        title:"insert",
        closeAction:"hide",
        modal:true,
        plain:true,
        resizable:false,
        items:this.form,
        buttons:[
            {
                text:"submit",
                handler:function(){
                    this.form.onInsert();
                },
                scope:this
            },{
                text:"cancel",
                handler:function(){
                    this.hide();
                    this.form.getForm().reset();
                },
                scope:this
            }
        ]
    });
}

});

UpdatePersonInfoWindow = Ext.extend(Ext.Window,{

form:null,

constructor:function(){
    this.form = new PersonInfoFormPanel();

    UpdatePersonInfoWindow.superclass.constructor.call(this,{
        title:"update",
        closeAction:"hide",
        modal:true,
        plain:true,
        resizable:false,
        items:this.form,
        buttons:[
            {
                text:"submit",
                handler:function(){
                    this.form.onUpdate();
                },
                scope:this
            },{
                text:"cancel",
                handler:function(){
                    this.hide();
                    this.form.getForm().reset();
                },
                scope:this
            }
        ]
    });
}

});

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";

new PersonViewWindow().show();

});
[/code]

看了很久了，不知道要怎么改，大家给点意见，工程我已经上传上来了

Answer 1

检查完毕，你犯了很多新手都会犯的错误，id冲突。你在你的form里的输入组件定义了id，然后你cancel的时候是以hide形式的，也就是说原来的没有被销毁。然后你update的时候又弹出一个,这个里面的form里的id就和原来的form里的id冲突了。html里id是唯一的