时间戳

首页 > 解决方案 > ExtJS 角色和权利概念

javascript - ExtJS 角色和权利概念

问题描述

我有一个带有角色和权限系统的应用程序。基本上我需要根据角色和权限设置显示和隐藏内容。

例如，我有一个具有静态字段的网格（无论角色和权限如何，所有用户都可以看到）：

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是我使用 AJAX 从后端获得的 JSON。它具有权利数组，其中一个数组元素HasShowAdminColumn可以为真或假（1 或 0）。

有很多角色、权利和网格需要修改。是否有任何自动化过程可以更轻松、更轻松地处理这个问题？否则，我将得到数千行代码，我必须检查每个角色和权限，并根据权限状态推送列。

标签： javascriptextjs

解决方案

我会通过绑定到隐藏在列上来做到这一点。您可以在主视图模型数据属性上加载设置，并一直继承它。或者您可以在子组件中创建设置配置，将它们显式绑定到外部视图模型，然后在更新挂钩上将其设置为内部视图模型 

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

推荐阅读