如何在ExtJS中動態更改組件可見性

Question

我有一個這樣的視口定義和一個選項板

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），並將隱藏設置為false。 這可能嗎？ 我想在定義視口之后執行此操作

這是我想要的例子。 如果條件合適，將2個實體動態設置為可見，並在左側顯示此菜單

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

好的，這就是我的做法

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

item_index可以這樣找到：您擁有this.items.indexMap ，它是一個數組，其中鍵是項xtype，值是項數組中的索引。 將所有項目默認設置為可見，使項目數組隱藏

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

然后在索引數組上循環並隱藏每個索引

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

getTabBar專門用於tabpanel