extjs替换主中心面板的正确方法

Question

在ExtJS中，在菜单工具栏按钮上，我试图删除中心窗口中的当前面板，然后使用新选择重新创建它。我不明白这样做的正确方法。到目前为止，当我单击菜单项时，它会删除当前成功的任何内容，然后它将成功添加新面板。问题是我第二次按下按钮时出现以下错误：

REGISTERING DUPLICATE COMPONENT ID 'mainportalID'.

我意识到它告诉我我已经使用过这个ID了，但那么删除当前面板的正确方法是什么，并用新的面板替换？

这是我的视图控制器：

    selectMenuButton: function (button, e) {

    console.log('select menu button section was hit')
    console.log(button);
    console.log(e);

    var optionString = button.text;
    var myDetailsPanel = Ext.getCmp('navview');
    console.log(myDetailsPanel);

    var count = myDetailsPanel.items.items.length;
    if (count > 0) {
        myDetailsPanel.items.each(function (item, index, len) {
            myDetailsPanel.remove(item, false);
        });
    }

    myDetailsPanel.add({
        xtype: optionString
    });
}


var myStore = Ext.create('ExtApplication1.store.PositionsStore');

var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
    {
        text: 'AcctNum',
        dataIndex: 'AcctNum',
        width: 100
    },
    {
        text: 'AcctShortCode',
        dataIndex: 'AcctShortCode',
        flex: 1
    },
    {
        text: 'Exchange',
        dataIndex: 'Exchange',
        width: 200
    }
]
});

这是我的观点

Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',

xtype: 'mainportal',

alias: 'widget.mainportal',

id: 'mainportalID',

html: 'user... this is the main portal window',

autoScroll: true,

bodyPadding: 10,

items: [
    gridSummary
]

});

调整小组

Ext.define('ExtApplication1.view.main.MainPortal', {
    extend: 'Ext.panel.Panel',

    xtype: 'mainportal',

    alias: 'widget.mainportalAlias',

    reference: 'gridtextfield',

    //id: 'mainportalID',

    html: 'user... this is the main portal window',

    autoScroll: true,

    bodyPadding: 10,

    items: [
        gridSummary
    ]

});

调整视图控制器

    onComboboxSelect: function (combo, record, eOpts) {

    console.log('new listener was hit');

    //return selected Item
    var selectedValue = record.get('ClientName');
    var selectedCID = record.get('ClientID');

    //find the grid that was created
    var me = this;
    console.log(me);
    var xxx = this.lookupReference('gridtextfield');
    debugger;

    //debugger;

    var mainPortalView = Ext.getCmp('mainportalID');
    var targetGrid = mainPortalView.down('grid');

    //find the store associated with that grid
    var targetStore = targetGrid.getStore();

    //load store
    targetStore.load({
        params: {
            user: 'stephen',
            pw: 'forero',
            cid: selectedCID
        }
        //callback: function (records) {
        //    Ext.each(records, function (record) {
        //        console.log(record);
        //    });

        //    console.log(targetStore);
        //}
    });
},

为MainPortal.js添加了监听器

var myStore = Ext.create('ExtApplication1.store.PositionsStore');

var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
    {
        text: 'AcctNum',
        dataIndex: 'AcctNum',
        width: 100
    },
    {
        text: 'AcctShortCode',
        dataIndex: 'AcctShortCode',
        flex: 1
    },
    {
        text: 'Exchange',
        dataIndex: 'Exchange',
        width: 200
    }
],

listeners: {
    destroy: function () {
        debugger;
    }
}

});



Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',

xtype: 'mainportal',

alias: 'widget.mainportalAlias',

//id: 'mainportalID',
itemId: 'mainportalID',

html: 'user... this is the main portal window',

autoScroll: true,

bodyPadding: 10,

items: [
    gridSummary
],

listeners: {
    destroy: function () {
        debugger;
    }
}

}）;