How to remove columns from ExtJs grid?

Question

I need to remove some columns on condition of user login. I have created a grid containing some columns. I need to remove username and password column when user login and want to show it on admin user login. so user can't able to see usernames and passwords in these column. only admin can see these columns. I used hidden Config likehidden : true on user login but user can unhide it using grid's internal tool. So, I want to completely remove these columns from that grid when user get login. You can see below is my sample ExtJs code. I didn't found any config in sencha/Extjs doc to completely remove these column using condition. Please give me solution on this. how can I do in that way.

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

Below image showing when I am login with user, this get hide columns but even user can able to show it by using grid internal tools of show/hide columns.

Narendra Jadhav Narendra Jadhav · Accepted Answer · 2018-07-24T10:54:42

Instead of hiding you can add dynamic columns inside of initComponent method. If user type is admin then add into the columns otherwise nothing to do.

In this Fiddle, I have created a demo using simple login window and grid.

CODE SNIPPET

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

How to remove columns from ExtJs grid?

1 Answers