How to dynamically change component visibility in ExtJS

Question

I have a viewport define like this with a 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
}

as you can see my items are hidden. I made an authentification system and i want to be able to reset hidden to specific items (for example entity2) and set hidden to false. Is this possible and how ? I want to do it just after my viewport definition

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

adding this piece of code produce this. I don't have the left menu and i have only one entity

Answer 1

ok here is how i did

this.getTabBar().getComponent(item_index).hide();

item_index can be found like this: you have this.items.indexMap which is an array where keys are the items xtypes and values are the index in items array. set all the items to visible as default, make an array of items to hide

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

loop on the array and make an index array

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

and then loop on the index array and hide each index

for (let i = 0; i < arr.length; i++) {
    this.getTabBar().getComponent(arr[i]).hide();
}

getTabBar is specific for tabpanel

Answer 2

Use setVisible function to change visibility of a component

add this to tabPanel

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