ExtJS Роли и концепция прав

Question

У меня есть приложение с системой ролей и прав.В основном мне нужно показать и скрыть вещи в зависимости от настроек роли и прав.

Например, у меня есть сетка со статическими полями (видимая для всех пользователей независимо от роли и свойства права):

var grid_results_columns = [
    { text: 'CompanyName', dataIndex: 'CompanyName', flex: 1 },
    { text: 'Address', dataIndex: 'Address', flex: 1 },
    { text: 'System ID', dataIndex: 'SID', flex: 1 }
]; 

И если я хочу показать / скрыть столбец, я делаю это так:

if (settings.rights[0].HasShowAdminColumn) {
    grid_results_columns.push({ text: 'AdminSetting', dataIndex: 'AdminSetting' });
}

settings - это JSON, который я получаю из бэкэнда с помощью AJAX.Он имеет массив прав, и один из элементов массива - HasShowAdminColumn, который может быть истинным или ложным (1 или 0).

Существует так много ролей, прав и сеток, которые необходимо изменить.Есть ли какой-нибудь автоматизированный процесс, чтобы справиться с этим более легко и менее болезненно?В противном случае я получаю тысячи строк кода, где мне придется проверять каждую роль и право и выдвигать столбцы в зависимости от статуса прав.

Answer 1

Я бы сделал это с привязкой к скрытому столбцу.Вы можете загрузить настройки в основном свойстве данных viewmodel и наследовать его до конца.Или вы можете создать конфиги настроек в дочерних компонентах, явно привязать их к внешней модели представления, а на хуке обновления установить его во внутреннюю модель представления

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'MyGrid',
    viewModel: {
    },
    store: {
        data: [{
            name: 'Foo',
            admin: 'Admin foo'
        }]
    },
    columns: [{
        dataIndex: 'name',
        flex: 1,
        text: 'name'
    }, {
        dataIndex: 'admin',
        flex: 1,
        text: 'admin',
        hidden: true,
        bind: {
            hidden: '{!rights.showAdmin}'
        }
    }]
});

Ext.define('Main', {
    extend: 'Ext.Container',
    viewModel: {
        rights: {}
    },

    controller: {
        init: function() {
            var vm = this.getViewModel();
            //mimick ajax load
            setTimeout(function(){
                vm.set('rights', {showAdmin: true});
            },3000);
        }
    },

    layout: 'fit',

    items: [{
        xtype: 'MyGrid'
    }]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Main', {
            width: 200,
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});