Adding enabling and disabling as context menu on a grid in extjs

Question

Hi I have added one context menu on my grid which will perform the enable and disable functionality for selected row. I am new to ExtJs. I have added below listener for the grid. How to add enable and disable functionality for the grid row?

listeners: {
    itemcontextmenu: function (grid, record, item, index, e) {
        var contextMenu = Ext.create('Ext.menu.Menu', {
            controller: 'grid-controller',
            width: 165,
            plain: true,
            items: [{
                text: 'Disable',
                listeners: {
                    click: {fn: 'disable', extra: record}
                },
            }]
        });
        e.stopEvent();
        contextMenu.showAt(e.getXY());
    }
}

What do you mean by disable? Not selectable? Greyed out? Besides, it is not a good practice to create the context menu in the listener. Research on how to create the menu only once for the grid. — Peter Koltai
Disabling means non selectable. Do you anything I can refer for my reference? Thanks in advance — rrahul789

Peter Koltai Peter Koltai · Accepted Answer · 2021-08-13T10:58:05

This is not a copy-paste answer, but going through the following steps with doing your own research you can solve your problem.

1. Create the context menu only once and destroy it

In you code, the context menu is created every time when the user opens up the menu on the grid. This is not good. Instead, create the context menu only once when the grid is created, and destroy it when the grid is destroyed. Something like this:

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    initComponent : function() {
        this.callParent();
        this.MyMenu = Ext.create('Ext.menu.Menu', {
            items: [...]
        });
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
    onDestroy : function() {
        if (this.MyMenu) {
            this.MyMenu.destroy();
        }
    },
    onItemContextMenu : function(view, rec, item,index, event) {
        event.stopEvent();
        this.MyMenu.showAt(event.getXY());
    }
});

2. Store enabled / disabled state in the record

For the next step to work, records in your grid must contain whether the corresponding row is enabled or disabled. In the context menu, when user selects enabled / disabled, store this status like this, get record of the row where the context menu was displayed from:

record.set('myDisabledState', true); // or false

It is important to store the disabled state (and not enabled), because when your grid initially is rendered, these values won't be in the records, so record.get('myDisabledState') will evaluate to FALSE, and that is the desired behaviour, if you want to start with every row being able to be selected.

3. Disable selection Now you can add a beforeselect listener to your grid, see documentation. This listeners receives record as parameter, and if you return false from this listener, the selection will be canceled. So in this listener simply add:

listeners: {
    beforeselect: function ( grid, record, index, eOpts ) {
        return !record.get('myDisabledState');
    }
}

4. Apply formatting - OPTIONAL

It is likely that you want to add different formatting for disabled rows, for example grey colour. The easiest way to do it is to add a custom CSS style to your Application.scss file:

.my-disabled-row .x-grid-cell-inner {
    color: gray;
}

Finally add getRowClass configuration to your grid, it will receive the current record being rendered, and you can return the above custom CSS style when the row is disabled:

Ext.define('MyGrid', {
    // your grid definition
    ,
    viewConfig: {
        getRowClass: function (record, rowIndex, rowParams, store) {
            if (record.get('myDisabledState')) {
                return "my-disabled-row";
            }
        }
    }
});

In this last part, when row is not disabled, it will return nothing, so default formatting will be used.

Adding enabling and disabling as context menu on a grid in extjs

1 Answers