Question

我有一个带有tabpanel的视口定义

Ext.define('rgpd.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    requires: [
        'rgpd.view.entity1.View',
        'rgpd.view.entity2.View',
        'rgpd.view.entity3.View',
        'rgpd.view.entity4.View',
        'rgpd.view.entity5.View',
    ],
    items: [{
        xtype: 'tabpanel',
        id: 'Rgpd',
        region: 'center',
        tabPosition: 'left',
        titleRotation: 0,
        tabRotation: 0,
        padding: 0,
        margin: 0,
        split: true,
        header: {
            layout: {
                align: 'stretchmax'
            },
            title: {
                text: 'RGPD',
                flex: 0
            },
            glyph: 124,
            items: []
        },
        config:{
            collapsible: true,
            hideCollapseTool: false,
            split:false
        },
        items: [
            {
                xtype: 'entity1',
                textAlign: 'right',
                flex: 1,
                hidden: true,
            },
            {
                xtype: 'entity2',
                textAlign: 'right',
                flex: 1,
                hidden: true,
            },
            {
                xtype: 'entity3',
                textAlign: 'right',
                flex: 1,
                hidden: true,
            },
            {
                xtype: 'entity4',
                textAlign: 'right',
                flex: 1,
                hidden: true,
            },
            {
                xtype: 'entity5',
                textAlign: 'right',
                flex: 1,
                hidden: true,
            },
        ]
    }]
});

if (condition) {
    // set entity2 hidden: false
}

因为你可以看到我的项目被隐藏了。我做了一个身份验证系统，我希望能够将隐藏重置为特定项目（例如entity2）并将hidden设置为false。这可能吗？怎么样？我想在我的视口定义之后做到这一点

here is an example of what i want. Dynamically setting 2 entities at visible if the condition is ok and have this menu on left side

listeners: {
    boxready: function(){
         if(condition){
              this.down("entity1").setVisible(true);
              this.down("entity2").setVisible(true);
         }
    }
}

添加这段代码会产生this。我没有左侧菜单，我只有一个实体

Answer 1

使用setVisible功能更改组件的可见性

将其添加到tabPanel

listeners: {
    boxready: function(){
         if(condition){
              this.down("entity1").setVisible(true);
              this.down("entity2").setVisible(true);
         }
    }
}

Answer 2

好的，这就是我的做法

NSNotificationCenter

item_index可以这样找到：你有this.getTabBar().getComponent(item_index).hide();这是一个数组，其中键是项xtypes，值是items数组中的索引。将所有项目设置为默认可见，制作要隐藏的项目数组

this.items.indexMap

在数组上循环并创建索引数组

to hide = ["entity2", "entity3"];

然后循环索引数组并隐藏每个索引

const arrayLength = to_hide.length;
arr = [];
for (let i = 0; i < arrayLength; i++) {
    arr.push(this.items.indexMap[to_hide[i]]);
}

getTabBar特定于tabpanel

如何在ExtJS中动态更改组件可见性

2 个答案: