Как динамически изменить видимость компонентов в ExtJS - PullRequest
Новая
       6

Как динамически изменить видимость компонентов в ExtJS

0 голосов
/ 23 мая 2018

У меня есть окно просмотра, определенное так с панелью табуляции 

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 .У меня нет левого меню, и у меня есть только одна сущность

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

хорошо, вот как я это сделал 

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

item_index можно найти примерно так: у вас есть 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]]);
}

, а затем зациклите массив индексаи скрыть каждый индекс 

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

getTabBar специфичен для tabpanel

0 голосов
/ 23 мая 2018

Используйте функцию setVisible , чтобы изменить видимость компонента

, добавьте это к tabPanel

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