ExtJS：在选项卡更改时重新加载选项卡数据

我正在创建一个MVC应用程序，遇到了一些问题。我有一个treestore作为菜单和一个带有一些项目的选项卡面板。当我单击一个特定的菜单项（我们称之为mymenuitem1或mymenuitem2）时，会创建mymenuitem类的一个新实例，但始终会将一组不同的数据加载到此实例中。问题是，单击mymenuitem1后，会为corporation1加载数据，单击mymenuitem2时，会为corporation2加载数据，但当我尝试从mymenuitem2更改为mymenuitem1时，仍有corporation2的数据

mymenuitem类定义：

Ext.define('Fleximanager.view.pages.corpmain', {
extend: 'Ext.panel.Panel',
xtype: 'corpmaintab',


closable: true,
layout: 'vbox',

initComponent: function() {
    this.items = [{
        xtype: 'dataview',
        flex: 5,
        store: Ext.getStore('corpmain').load({
            params:{
                hostname: sessionStorage.hostname,
                auth: sessionStorage.authSessionId,
                corp: sessionStorage.activeCorp
            }
        }),
        itemTpl: new Ext.XTemplate(
            '<tpl for="(branches)">',
                '<table id="tfhover" id="home_table" class="tftable" style="margin-bottom: 10px;">',
                '<caption class="x-panel-header-default">{branch_name}</caption>',
                '<tr><td colspan="2">Expenses:<br>{strediskonakladyCelk}</td><td colspan="2">Profit:<br>{strediskoziskCelk}({strediskomarzaCelk})</td><td colspan="2">Revenues:<br>{strediskoprijmyCelk}</td></tr>',
                '<tr><td colspan="2">Not paid expenses:<br>{strediskoneuhrPrijCelk}</td><td colspan="2">VAT: <br>{streddphCelk}</td><td colspan="2">Not paid revenues:<br>{strediskoneuhrVydCelk}</td></tr>',
                '</table>',
            '</tpl>'
        )
    }],
    this.renderTo = Ext.getBody();
    this.callParent();
}
});

谁能帮帮我吗？

---

欢迎回答。

您正在为每个选项卡创建

fleximager.view.pages.corpmain的新实例。但所有选项卡都使用相同的store实例（id为
corpmain的store
），该实例在创建选项卡实例时正在加载数据。因此，当您单击mymenuitem1时，将创建第一个选项卡，并使用corporation1数据加载存储。当您单击mymenuitem2时，将创建第二个选项卡，并使用corporation2数据加载存储。但当您单击mymenuitem1上的上一步时，您会发现现有的选项卡，但存储区仍然加载了corporation2数据

因此，如果您只想使用store的一个实例，那么在切换回现有选项卡时，还需要使用适当的数据重新加载它

另一种可能是为每个选项卡创建新的存储实例
 您正在为每个选项卡创建
fleximager.view.pages.corpmain的新实例。但所有选项卡都使用相同的store实例（id为
corpmain的store
），该实例在创建选项卡实例时正在加载数据。因此，当您单击mymenuitem1时，将创建第一个选项卡，并使用corporation1数据加载存储。当您单击mymenuitem2时，将创建第二个选项卡，并使用corporation2数据加载存储。但当您单击mymenuitem1上的上一步时，您会发现现有的选项卡，但存储区仍然加载了corporation2数据

因此，如果您只想使用store的一个实例，那么在切换回现有选项卡时，还需要使用适当的数据重新加载它

另一种可能是为每个选项卡创建新的存储实例
 对。我强烈建议为每个选项卡创建一个存储实例，以避免在返回到已打开的选项卡时无用地重新加载数据。如果您需要筛选、排序或执行与此存储相关的任何操作，也可以避免将来的问题。如果我不知道有多少公司，如何为每个公司创建存储的新实例？您可以通过
var store=Ext.create（'your_store_CLASS'）在initComponent方法中轻松创建它没错。我强烈建议为每个选项卡创建一个存储实例，以避免在返回到已打开的选项卡时无用地重新加载数据。如果您需要筛选、排序或执行与此存储相关的任何操作，也可以避免将来的问题。如果我不知道有多少公司，如何为每个公司创建存储的新实例？您可以通过
var store=Ext.create（'your_store_CLASS'）在initComponent方法中轻松创建它
setMenuItem: function(record){
    var dbName = record.get('dbName');
    var classname, controller;
    if(record.isLeaf()){
        classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
        controller = this.getController(Ext.String.createVarName(dbName));
    } else {
        classname = 'Fleximanager.view.pages.corpmain';
        controller = this.getController('corpmain');
    }
    var tabPanel = Ext.getCmp('flexitabs');
    var tabId = record.parentNode.get('text') + '/' + dbName + 'tab'
    var tabIndex = tabPanel.items.findIndex('id', tabId)


    if(tabIndex != -1){
        tabPanel.setActiveTab(tabIndex);
    } else {
        if(record.isLeaf() && record.parentNode.get('text') != 'Root'){
            sessionStorage.activeCorp = record.parentNode.get('dbName')
            tabPanel.add(Ext.create(classname, {
                title: record.parentNode.get('text') + ' - ' + record.get('text'),
                id: tabId,
                rootId: record.parentNode.get('dbName'),
                className: classname
            }));
        } else {
            sessionStorage.activeCorp = record.get('dbName')
            tabPanel.add(Ext.create(classname, {
                title: record.get('text'),
                id: tabId,
                rootId: record.get('dbName'),
                className: classname
            }));
        }
        tabPanel.setActiveTab(tabId);
    }
}