How to uncheck the checkcolumn of perticular row in Ext grid - extjs

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.

Answer 1

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: 'lisa#simpsons.com',
phone: '555-111-1224',
active: false
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge#simpsons.com',
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();
}
}]
});