如何从ExtJs网格中删除列？

Posted 2021-05-06

我需要在用户登录的情况下删除一些列。我创建了一个包含一些列的网格。我需要在用户登录时删除用户名和密码列，并希望在管理员用户登录时显示。因此用户无法在这些列中看到用户名和密码。只有管​​理员才能看到这些列。我在用户登录时使用了隐藏的Config likehidden : true，但是用户可以使用网格的内部工具取消隐藏它。所以，我想在用户登录时从该网格中完全删除这些列。您可以在下面看到我的示例ExtJs代码。我没有在sencha / Extjs doc中找到任何配置来使用条件完全删除这些列。请给我解决方案。我怎么能这样做

Ext.define('fleet.view.Vehiclelist', {
    extend: 'Ext.grid.Panel',
    initComponent: function () {

        Ext.apply(this, {
            layout: 'fit',
            columns: [{
                header: 'Vehicle Id',
                dataIndex: 'vehicleId',
                flex: 1
            }, {
                header: 'Vehicle No',
                dataIndex: 'vehicleNo',
                flex: 1
            },{
                header: 'Username',
                dataIndex: 'username',
                flex: 1,
                hidden: this.isAdmin == true ? false : true
            }, {
                header: 'Password',
                dataIndex: 'password',
                flex: 1,
                hidden: this.isAdmin == true ? false : true
            }]
        });
        this.callParent();
    }
});

下图显示我何时登录用户，这得到隐藏列，但即使是用户也可以使用show / hide列的网格内部工具来显示它。

答案

您可以在hiding方法中添加动态列，而不是initComponent。如果用户类型是admin，则添加到列中，否则无事可做。

在这个Fiddle中，我使用简单的登录window和grid创建了一个演示。

代码链

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Vehiclelist', {
            extend: 'Ext.grid.Panel',
            xtype:'vehiclelist',
            initComponent: function () {
                let columns = [{
                    header: 'Vehicle Id',
                    dataIndex: 'vehicleId',
                    flex: 1
                }, {
                    header: 'Vehicle No',
                    dataIndex: 'vehicleNo',
                    flex: 1
                }];
                if (this.isAdmin) {
                    columns.push({
                        header: 'Username',
                        dataIndex: 'username',
                        flex: 1
                    }, {
                        header: 'Password',
                        dataIndex: 'password',
                        flex: 1
                    });
                }
                Ext.apply(this, {
                    layout: 'fit',
                    columns: columns
                });
                this.callParent();
            }
        });

        Ext.create('Ext.window.Window', {
            title: 'Login',
            width: 350,
            layout: 'vbox',
            closable: false,
            draggable: false,
            resizable: false,
            bodyPadding: 10,
            defaults: {
                xtype: 'textfield',
                labelAlign: 'top',
                width: '100%'
            },
            items: [{
                fieldLabel: 'Username'
            }, {
                fieldLabel: 'Password',
                inputType: 'password'
            }],
            bbar: ['->', {
                text: 'Login',
                handler: function (btn) {
                    Ext.destroy(btn.up('window'));
                    Ext.create({
                        xtype:'vehiclelist',
                        title:'With username and password',
                        renderTo:Ext.getBody(),
                        isAdmin:true
                    });

                    Ext.create({
                        xtype:'vehiclelist',
                        margin:'20 0',
                        title:'Without username and password',
                        renderTo:Ext.getBody(),
                        isAdmin:false
                    });
                }
            }]
        }).show();
    }
});