EXTJS: How to add listerners to the checkbox added to the grid dynamically

Question

I am working with grid with multiple checkbox columns in the the grid. The state of the checkbox (check or unchecked) is based on the webservice response.

I have added two checkbox columns shown as below,

        // Column 1
        {
                text : 'Column1',
                dataIndex : 'Column1',
                align: 'center',
                renderer: function(value, meta, record, rowIndex, colIndex) {
                    if(record != null && record.get('text') === 'col1') {
                        value = '<input type = "checkbox" checked />';
                    } else {
                        value = '<input type = "checkbox" />';
                    }
                    return value;
                }

            },
          // Column 2
            {
                text : 'Column2',
                dataIndex : 'Column2',
                align: 'center',
                renderer: function(value, meta, record, rowIndex, colIndex) {
                    if(record != null && record.get('text') === 'col2') {
                        value = '<input type = "checkbox" checked />';
                    } else {
                        value = '<input type = "checkbox" />';
                    }
                    return value;
                }

            },

Now, I have to disable column 2 if column 1 is checked and vice versa. I tried to work with checkcolumn but it is not working as expected.

I am not sure, how to associate a listener to checkbox in the column render.

Any help pointers would be great.

Answer 1

You should go with the checkbox column. It will save you a lot of work. What you need is event checkchange. When one column is checked you uncheck the other one and vice versa

columns: [{
    xtype: 'checkcolumn',
    dataIndex: 'ac1',
    text: 'MyCheck',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange'
    }
}, {
    xtype: 'checkcolumn',
    dataIndex: 'ac2',
    text: 'MyCheck1',
    listeners: {
        checkchange: 'onCheckcolumnCheckChange2'
    }
}, {
    xtype: 'gridcolumn',
    dataIndex: 'text',
    text: 'String'
}],

onCheckcolumnCheckChange: function (checkcolumn, rowIndex, checked, record, eOpts) {
    // first checkbox is checked
    if (checked) {
        // uncheck the second checkbox
        record.set('ac2', false)
    }
},

onCheckcolumnCheckChange2: function (checkcolumn, rowIndex, checked, record, eOpts) {
    //second column is checked
    if (checked) {
        // uncheck the first checkbox
        record.set('ac1', false)
    }
}

https://fiddle.sencha.com/#view/editor&fiddle/1lsj

---

Solution for disabling/enabling the cell:

onCheckcolumnCheckChange: function (checkcolumn, rowIndex, checked, record, eOpts) {
    // we need to get a grids view
    var view = Ext.first('#MySpecialGridId').getView();
    var cell = view.getCell(rowIndex,1);

    if (checked) {
        // add disable CSS to a cell
        cell.addCls(this.disabledCls);
    }else{
        // let's say we wan to enable the
        cell.removeCls(this.disabledCls)
    }

},

https://fiddle.sencha.com/#view/editor&fiddle/1lvm