javascript - 如何动态更改 ExtJS 中的组件可见性

Question

我有一个像这样带有选项卡面板的视口(viewport)定义

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
}

如您所见，我的元素已隐藏。我制作了一个身份验证系统，我希望能够将隐藏重置为特定项目(例如实体2)并将隐藏设置为 false。这可能吗？如何实现？我想在我的视口(viewport)定义之后执行此操作

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