关于Ext的控件复用的问题

Question

各位好：我由于才开始学习ext并用ext制作了一个应用。
描述一下场景：
首先进入一个数据列表显示数据，有一个添加按钮和编辑按钮，添加按钮我new出一个新的窗口，编辑按钮我也new出一个新的窗口对象。但是这两个窗口加载同一个frompanel，但是实践证明，编辑窗口可以显示并正常显示了内部的panel，另一个添加操作，窗口可以正常显示但是内部的panel不能正常显示。现在我想问一下，有没有办法能避免新建两个panel，因为这两个panel的验证方法是完全相同的，写两遍貌似很麻烦。代码如下：//修改窗口
var win_modify = new Ext.Window({
layout: 'fit',
id:'win_modify',
title:'修改数据字典信息',
width:340,
height:340,
closable:true,
resizable:true,
closeAction: 'hide',
items:modifyDataDicForm,
modal:true,
buttons : [{
text:'确定',
iconCls:'icon-ButtonSet-OK',
handler:function(){
Ext.MessageBox.confirm('请确认', '您确实要修改信息吗? ', modDataDic);
}
        },
{
            text : '关闭',
iconCls:'icon-ButtonSet-close',
            handler : function() {
         win_modify.hide();
            }
        }]
});function modifyOpt() {
if(win_modify){
win_modify.show();
}
}；
var modifyDataDicForm = new Ext.FormPanel({
    layout: 'form',
border: false,
items: [
{
layout:'column',
    border: false,
    width: 800,
    items:[{
     columnWidth:.42,
     border: false,
     layout: 'form',
     items: editDataDicPanel
    }]
}]
});
//添加窗口
var win_add = new Ext.Window({
layout: 'fit',
id:'win_add',
title:'添加字典值',
width:350,
height:300,
closable:true,
resizable:true,
closeAction: 'hide',
items:dataDicForm,
buttons : [{
text:'确定',
iconCls:'icon-ButtonSet-OK',
handler:function(){
Ext.MessageBox.confirm('请确认', '您确实要添加吗? ', addDataDic);
}
        },
{
            text : '关闭',
iconCls:'icon-ButtonSet-close',
            handler : function() {
         win_add.hide();
            }
        }]
});function addShow(){
if(win_add){
win_add.show();
}
}；
var dataDicForm = new Ext.FormPanel({
layout: 'border',
border: false,
items: [{
region: 'center',
layout: 'fit',
border: false,
items: addDataDicPanel
}
]})
//pancel
var addDataDicPanel = new Ext.Panel({
frame:true,
    layout: 'form',
    border: false,
labelWidth: 80,
bodyStyle: 'text-align: left;padding:20px 20px 0',
items:[
new Ext.form.ComboBox({
id:'tableName',
fieldLabel: '所属数据表',
typeAhead: true,
forceSelection: true,
allowBlank: false,
triggerAction: 'all',
lazyRender: true,
width: 150,
mode:'local',
store:firstStore,
valueField:'tableName',
displayField:'tableChinese',
emptyText:'请选择',
}),
     new Ext.form.ComboBox({
id:'colsName',
fieldLabel: '所属字段',
typeAhead: true,
forceSelection: true,
allowBlank: false,
triggerAction: 'all',
lazyRender: true,
width: 150,
mode:'local',
store:secondStore,
valueField:'colDispName',
displayField:'colDispName',
emptyText:'请选择'
    })
]
});

Answer 1

不要设置id，frompanel里面的任何组件都不要有id，有了id你就只可能有一个显示正常。不设置id时ext会自己自动生成不一样的Id。

Answer 2

  当时写EXT的时候，也遇到这种问题~~ ADD,UPDATE操作，涉及的是同一formpanel，唯一不同的是，加载form是否填值的问题！验证都一样，当时处理，就是把这个formpanel的建立操作，写到一个单独的方法或者JS中， 比如 function createOrEditForm(oper),传入oper值为'A','U'，在确定事件中，
buttons : [{
text:'确定',
iconCls:'icon-ButtonSet-OK',
handler:function(){
Ext.MessageBox.confirm('请确认', '您确实要添加吗? ',oper=='A' ? addDataDic : updateDataDic);
}
  },
用三元运算，来判断，你的确定按钮，是跳转到添加，或者更新方法，大致意思就是这样