如何在基于某些行记录数据加载时禁用 extJS 网格中的网格单元

Question

How to disable grid cell in extJS grid while loading base on some reacid data.

I am using grid where I want to disable one grid editor based on record data. Here what I am trying but what happening is when any of the cell is getting disable entier column cellis getting disable.

My clumn definaation

{
    "header": "column 3",
    "tdCls":"editable-grid-cell",
    "dataIndex": "clumn3",
    "width":120,
    "renderer":"enableDisablecolumn3",
    "editor": {
      "xtype": "numberfield", 
      "bind": "{record.column3}",
      "disabled":false,
      "allowDecimals":true,     
      "decimalPrecision":5,
      "allowNegative": false,
      "maskRe": "/[0-9.-]/",
      "minValue": 0 
    }
}

My renderer methos.

enableDisablecolumn3:  function(value, metaData, record) {
        //debugger;
        let _this = this;
        var gridEditor = metaData.column.getEditor();
        if ('Yes' === record.data.column2&& ) {    
            gridEditor.setDisabled(true);    
        }
    } 

Any idea how to achive this. I want disable only that perticular cell.

Answer 1

You can use beforeedit event. Something like this:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    completeOnEnter: false,
                    field: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            selModel: 'cellmodel',
            plugins: {
                cellediting: {
                    clicksToEdit: 1
                }
            },
            height: 200,
            width: 400,
            listeners: {
                beforeedit: function( editor, context, eOpts ) {
                    if(context.field === 'name' && context.value === "Marge") {
                        return false;
                    }
                }
            },
            renderTo: Ext.getBody()
        });
    }
});