如何从 ExtJs 网格中删除列？

Question

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

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 列的网格内部工具来显示它。

Answer 1

您可以在 initComponent 方法中添加动态列，而不是 hiding。如果用户类型是 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();
    }
});

如何从 ExtJs 网格中删除列？

How to remove columns from ExtJs grid?

extjs

extjs4.2