Question

我正在创建一个MVC应用程序，但我遇到了一些问题。我有一个树店作为菜单和一个带有一些项目的tabpanel。当我单击一个特定的菜单项时，我们将其命名为mymenuitem1或mymenuitem2，创建一个mymenuitem类的新实例，但始终会将一组不同的数据加载到此实例中。问题是，在我点击mymenuitem1之后，数据被加载到corporation1，当我点击mymenuitem2时，数据被加载到corporation2，但是当我尝试从mymenuitem2更改为mymenuitem1时，仍然存在corporate2的数据

我的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();
}
});

如何从菜单中选择和添加标签：

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);
    }
}

有人可以帮帮我吗？任何答案都赞赏。

Answer 1

您正在为每个标签创建Fleximanager.view.pages.corpmain的新实例。但是所有选项卡都使用相同的store实例（存储标识为corpmain），该选项在选项卡实例创建时加载数据。因此，当您单击mymenuitem1时，将创建第一个选项卡，并使用corporation1数据加载存储。当您单击mymenuitem2时，将创建第二个选项卡，并使用corporation2数据加载存储。但是当你点击mymenuitem1时，你会发现现有的标签，但是商店仍然加载了corporate2数据。

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

另一种可能性是为每个选项卡创建新的商店实例。

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

1 个答案: