how can I disable checkbox for the same grid row using listener?

Question

I have these two grid checkbox columns

xtype:'checkcolumn',
dataIndex:'FUN',
id:'fun',
listeners:{checkchange:'onFunChecked'},

xtype:'checkcolumn',
dataIndex:'FUN2',
id:'fun2',
listeners:{checkchange:'onFunChecked'}

So the grid has 3 rows and when I check the FUN checkbox from first row,I want to disable FUN2 from the same first row .

Right now I'm using

 Ext.getcmp('fun2').disable().

But the issue is, this is disabling the checkbox for all the three rows ,I only want to disable for the first row .Please help.Thanks in advance

Answer 1

You need to get the current row in the grid, not the entire column.

Assuming that FUN2 is the second column (with column index 1), you can use the following code. This will re-enable the second column when the first is unchecked but you can adjust as you need.

You can try it with Sencha Fiddle, I tested with Ext JS 6.2.0 classic triton:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['check1', 'check1'],
            data: [{
                "check1": false,
                "check2": false
            }, {
                "check1": false,
                "check2": true
            },{
                "check1": false,
                "check2": false
            }]
        });
        Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            store: store,
            columns: [{
                xtype: 'checkcolumn',
                text: 'Check1',
                dataIndex: 'check1',
                listeners: {
                    checkchange: function(column, rowIndex, checked, record, e, eOpts) {
                        const check2Cell = column.up('grid').getView().getCell(record, 1);
                        if (checked) {
                            check2Cell.addCls('x-item-disabled');
                        } else {
                            check2Cell.removeCls('x-item-disabled');
                        }
                    }
                }
            }, {
                xtype: 'checkcolumn',
                text: 'Check2',
                dataIndex: 'check2',
            }],
        });
    }
});