Question

我的应用程序（mvc）设计为这样，在我的视图中有3个选项卡

Ext.define('App.view.cube.MainView', {
    extend: 'Ext.panel.Panel',
    ....
    layout: 'card',
    ...
    dockedItems: [{
        xtype: 'panel',
        items: [{
            // a drop down containing 2 choices
        }]
    }],
    items: [{
        xtype: 'tabpanel',
        itemId: 'mmtabs',
        activeTab: 1,
        items: [{
            title: 'Served',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'Served :',
            itemId: '1'
        }, {
            title: 'UnServed',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'UnServed :',
            itemId: '0'
        }, {
            title: 'Total',
            xtype: 'treepanel', // my own xtype extending this xtype
            id: 'Total :',
            itemId: '2'
        }]
    }]
});

基本上，有两个选项的下拉菜单应该允许用户查看网格（treepanel）中所需的列。第一次加载应用程序并且用户在下拉列表中更改为其他选项时，列不会按原样隐藏。但是，如果他要导航到另一个选项卡，然后做同样的事情，一切都按预期工作。我无法弄清楚问题。

在上面的代码中，我正在重复使用

xtype : 'treepanel', // my own xtype extending this xtype

通过使用不同的itemIds来跨越三个标签（我希望这很好）。

在我的控制器中，我有一个切换到视图的功能（隐藏/显示特定的列） initialview（遍历所有选项卡中的所有列并设置相应的视图）在我看来，在组合框上调用了changeview。

toggleView: function (cubemwwar, viewId) {
    if ("2" == viewId) {
        cubemwwar.columns[1].setVisible(false);
        cubemwwar.columns[2].setVisible(false);
        cubemwwar.columns[3].setVisible(false);
        cubemwwar.columns[4].setVisible(true);
        cubemwwar.columns[5].setVisible(true);
        cubemwwar.columns[6].setVisible(true);
    }
    if ("1" == viewId) {
        cubemwwar.columns[1].setVisible(true);
        cubemwwar.columns[2].setVisible(true);
        cubemwwar.columns[3].setVisible(true);
        cubemwwar.columns[4].setVisible(false);
        cubemwwar.columns[5].setVisible(false);
        cubemwwar.columns[6].setVisible(false);
    }
}, // on controller's onlaunch
initialView: function () {
    var numTabs = this.getCubeMainView().query('#mmtabs')[0].items.length;
    for (var i = 0; i < numTabs; i++) {
        var tab = this.getCubeMainView().query('#mmtabs')[0].items.items[i];
        this.toggleView(tab, 1);


    }
},
// change views based on user selection 
//   from the combobox's select event
changeView: function (combo, rec, idx) {
    // first time somehow the columns do not hide
    // hide/show appropriate columns
    // rec[0].data.id  .. .possible values 1 and 2 only.
    this.toggleView(this.getCubeMainView().query('#mmtabs')[0].getActiveTab(), rec[0].data.id);
},

Answer 1

启动时，我遍历所有选项卡，将它们设置为活动状态，然后将第一个设置为活动状态。这解决了这个问题。

for(var i=0;i<numTabs ; i++)
{
    var tab = tabPanel.items.items[i];
    this.toggleView(tab,1);
    tabPanel.setActiveTab(i);
}
tabPanel.setActiveTab(0);
this.startingup = false;

extjs4列隐藏在选项卡之间共享的treepanel中

1 个答案: