求高手解答，如何创建为对象

Question

<script language="javascript">
Ext.QuickTips.init();
Ext.onReady(function(){
    var button = new Ext.Button({
        text:'Add Tab',
        handler:addTab,
        iconCls:'new-tab'
    });    var accordion = new Ext.Panel({
        collapsible:true,
        region:'west',
        margins:'5 0 5 5',
        split:true,
        width:200,
        minSize:200,
        maxSize:250,
        layout:'accordion',
        bbar:[{text:'系统功能'}, button]
    });   
  
    var welcome = new Ext.Panel({   
        id:'欢迎',   
        title:"欢迎",   
        margins:'5 5 5 0',   
        bodyStyle:'background:#ffffff'  
    });   
  
    var panel = new Ext.TabPanel({   
        id:'tabPanel',   
        activeTab:0,   
        resizeTabs:true,   
        region:'center',   
        margins:'5 5 5 0',   
        autoDestroy:true,   
        items:[welcome]  
    });
    var menu=new Ext.Panel({
            id:'菜单管理',
            title:'菜单管理',
            region:'center',
            margins:'0 0 0 0',
            layout:'border',
            bodyBorder:false,
            border:false,
            closable:true,
            items:[{
                title:'系统菜单',
                xtype:'panel', 
                collapsible:true,   
                region:'west',   
                width:'200',   
                margins:'0 0 0 0',   
                bodyBorder:true,   
                border:true  
            }, {   
                xtype:'panel',
                title:'系统菜单',
                region:'center',
                margins:'0 0 0 0',
                bodyBorder:true,
                border:true
            }]
    });
    function addTab(){
        panel.add(menu).show();
    }
  
    var viewport = new Ext.Viewport({
        layout:'border',   
        items:[accordion,panel]   
    });   
});
</script>如何让menu成为对象，每次add的时候重新实例化一个，好当组件(panel)销毁后，重新加载时让他的子部件(panel)也加载

Answer 1

<script language="javascript">
Ext.QuickTips.init();
Ext.onReady(function(){
    var button = new Ext.Button({
        text:'Add Tab',
        handler:addTab,
        iconCls:'new-tab'
    });    var accordion = new Ext.Panel({
        collapsible:true,
        region:'west',
        margins:'5 0 5 5',
        split:true,
        width:200,
        minSize:200,
        maxSize:250,
        layout:'accordion',
        bbar:[{text:'系统功能'}, button]
    });   
  
    var welcome = new Ext.Panel({   
        id:'欢迎',   
        title:"欢迎",   
        margins:'5 5 5 0',   
        bodyStyle:'background:#ffffff'  
    });   
  
    var panel = new Ext.TabPanel({   
        id:'tabPanel',   
        activeTab:0,   
        resizeTabs:true,   
        region:'center',   
        margins:'5 5 5 0',   
        autoDestroy:true,   
        items:[welcome]  
    });
    
    function addTab(){
        panel.add({
            id:'菜单管理',
            title:'菜单管理',
            region:'center',
            margins:'0 0 0 0',
            layout:'border',
            bodyBorder:false,
            border:false,
            closable:true,
            items:[{
                title:'系统菜单',
                xtype:'panel', 
                collapsible:true,   
                region:'west',   
                width:'200',   
                margins:'0 0 0 0',   
                bodyBorder:true,   
                border:true  
            }, {   
                xtype:'panel',
                title:'系统菜单',
                region:'center',
                margins:'0 0 0 0',
                bodyBorder:true,
                border:true
            }]
    }).show();
    }
  
    var viewport = new Ext.Viewport({
        layout:'border',   
        items:[accordion,panel]   
    });   
});
</script>

Answer 2

写一个构造函数
例如function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  //自定义的方法...
  return oTempCar;
}
var oCar1 = createCar();

Answer 3

Ext.QuickTips.init();
Ext.onReady(function()
{
var button = new Ext.Button({
text : 'Add Tab',
handler : addTab,
iconCls : 'new-tab'
}); var accordion = new Ext.Panel({
collapsible : true,
region : 'west',
margins : '5 0 5 5',
split : true,
width : 200,
minSize : 200,
maxSize : 250,
layout : 'accordion',
bbar : [{
text : '系统功能'
}, button]
}); var welcome = new Ext.Panel({
id : '欢迎',
title : "欢迎",
margins : '5 5 5 0',
bodyStyle : 'background:#ffffff'
}); var panel = new Ext.TabPanel({
id : 'tabPanel',
activeTab : 0,
resizeTabs : true,
region : 'center',
margins : '5 5 5 0',
autoDestroy : true,
items : [welcome]
});
//把menu改为对象来操作 
var menu = {
id : '菜单管理',
title : '菜单管理',
region : 'center',
margins : '0 0 0 0',
layout : 'border',
bodyBorder : false,
border : false,
closable : true,
items : [{
title : '系统菜单',
xtype : 'panel',
collapsible : true,
region : 'west',
width : '200',
margins : '0 0 0 0',
bodyBorder : true,
border : true
}, {
xtype : 'panel',
title : '系统菜单',
region : 'center',
margins : '0 0 0 0',
bodyBorder : true,
border : true
}]
};
function addTab()
{
//这里当销毁后 每次add都要重新渲染 而之前那个menu是new了一下Ext的panel 销毁之后 再add 前后不一样
panel.add(menu).show();

} var viewport = new Ext.Viewport({
layout : 'border',
items : [accordion, panel]
});
});

Answer 4

如果我将menu的items换成一个editorgrid，第二次打开的时候就有问题了，我的代码如下var smFee = new Ext.grid.CheckboxSelectionModel({moveEditorOnEnter:true});
var cmFee=new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        smFee,
        {dataIndex:"fee_no",header:"费用",editor:new Ext.form.NumberField({allowBlank:false})},
        {dataIndex:"re",header:"备注",editor:new Ext.form.TextField({maxLength:240})}
    ]);
var CntFee={
        id:"fee",
        title:"测试",
        layout:'fit',
        items:[
            {
            autoScroll:true,
            items:[{
                xtype:'editorgrid',
                id:"CntFeeGrid",
            store:CntFeeStore,
            sm:smFee,
            cm:cmFee,
            loadMask:true,
                clicksToEdit:1,
                height:310,
                border:false
            }]
            }
        ]
        };

Answer 5

论坛上也有遇到类似问题的，其中有一个解决方案：The fields get destroyed when the component gets destroyed, so yeah, it's not going to work because you're referencing a static column model! your best bet is to create a factory method to create a new collumn model and editors.请高手指点，我定义的列是不是一个静态的，如何才能创建一个新的实例出来？？？

Answer 6

增加以下配置看看autoDestroy:false,
listeners:{remove:function(tabp,c){c.hide();}}