如何动态更改 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。这可能吗？怎么办？我想在我的视口定义之后做这件事

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

好的，这就是我的做法

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

item_index 可以这样找到：你有 this.items.indexMap 这是一个数组，其中键是项目 xtypes，值是项目数组中的索引。将所有项目设置为默认可见，创建一个项目数组以隐藏

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

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

How to dynamically change component visibility in ExtJS

javascript

extjs

extjs6