How to uncheck the checkcolumn of perticular row in Ext grid

Question

I have a grid which has a column of checkboxes. I have used xtype checkcolumn

for this. follow fiddle here: https://fiddle.sencha.com/#view/editor&fiddle/2ano

Now I want to uncheck checkbox at perticular(in this case 2nd) row on click of given button. I tried getting them using xtypes but no luck.

finally I found a workaround.

store.getAt(1).data.active = false;
grid.getView().refresh();

It works but not sure if its the correct way to do so. I will be glad for any suggestions. Thank you.

Narendra Jadhav Narendra Jadhav · Accepted Answer · 2017-12-08T14:11:15

One way as per your code.

You can use this methods of grid store store.each(), store.clearFilter() and store.filter('active',true).

In this FIDDLE, you can check here uncheck checked columns using record.set('active',false).

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: '[email protected]',
        phone: '555-111-1224',
        active: false
    }, {
        name: 'Bart',
        email: '[email protected]',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: '[email protected]',
        phone: '555-222-1254',
        active: false
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    itemId: 'test',
    renderTo: Ext.getBody(),
    store: store,
    buttons: [{
        text: 'Un check',
        handler: function () {
            var store = this.up('grid').getStore();
            store.clearFilter();
            store.filter('active', true);
            store.each(function (rec) {
                rec.set('active', false);
            });
            store.clearFilter();
        }
    }],
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'checkcolumn',
        text: 'Active',
        dataIndex: 'active'
    }]
});

Another way as per your code.

You can use selModel and selType configs for grid.

In this FIDDLE, I have created a demo using selType and selModel config. it will help you or guide you more about grid checkbox selection.

Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        id: 'testGrid',
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        renderTo: Ext.getBody(),
        selModel: {
            checkOnly: false,
            //injectCheckbox: 'last',
            mode: 'SIMPLE'
        },
        selType: 'checkboxmodel',
        buttons: [{
            text: 'Select All',
            handler: function () {
                Ext.getCmp('testGrid').getSelectionModel().selectAll();
            }
        }, {
            text: 'Deselect All',
            handler: function () {
                Ext.getCmp('testGrid').getSelectionModel().deselectAll();
            }
        }]
    });

How to uncheck the checkcolumn of perticular row in Ext grid

1 Answers