How to programmatically disable cells in a Ext.grid.EditorGridPanel

Question

I have a web application that uses ExtJS 4 that incorporates a Ext.grid.EditorGridPanel.

One of the columns of the Ext.grid.EditorGridPanel has a combobox editor that I would like to disable programmatically when the store loads based on the value of another field in the store.

It seems like this should be pretty simple - but so far nothing seems to work.

When the Grid's store loads, I have a listener to check each row and disable the combobox in index 4 depending on the value of another field.

The only thing that I can't get to work is actually disabling the combobox.

Any suggestions?

Here is the psuedo-code. Thanks in advance

listeners: {
    'load': function(st, records, options) {

        var view = getMyEditorGridPanel().getView();

        for (var i = 0; i < this.getCount(); i++) {             

            if (store.getAt(i).get('setDisabled') === 'Y') {


                //The cell at index 4 has a combobox editor - I CAN'T GET IT TO DISABLE!!
                view.getCell(i,4).setDisabled(true);
            }
        }
     }

Answer 1

From my point of view you have two different things you need to manage here:

1. Cell Styling, the way a cell looks when not being edited (either is enabled or disabled)
2. Editor Availability, how to react when a cell is about to be edited (should be possible to edit the cell)

Cell Styling

For the first one I would advice to provide a style to each cell in order to make it look disabled, this can be achieved during rendering time instead trying to do it when the store loads (btw nothing ensures you that the grid items have been fully rendered just after getting the load event callback). You can return a custom class per row by providing an implementation to Ext.grid.ViewView.getRowClass

viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return record.get("disabled") ? "mail-disabled" : "";
        }
    }

Editor Availability

You will also need to handle the Ext.grid.plugin.CellEditingView.beforeedit event and provide a custom logic to determine when the editor will be available

 plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1,
        listeners: {
            beforeedit: function(editor, e, eOpts) {                
                return e.record.get("disabled") == false;
            }
        }
    })]

You can find a working example of both solutions here, hope it helps to solve your problem.