I have the following part of code that displays row of checkboxes in grid in this way grid
columns of grid:
columns: [{
text: 'Name',
dataIndex: 'name'
},{
text: 'Permissions',
dataIndex: 'permissions',
width: 200,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var checkboxes = '';
for (var variable in value) {
var temp = value[variable] === 1 ? 'checked' : '';
checkboxes += '<input type="checkbox" ' + 'name="' + variable + '" value="' +
value[variable] + '"' + temp + '>' + variable;
}
return checkboxes;
}
}]
I would like to save each checkbox value, so when I change the checked value of checkbox it saves even after page reload. I am trying to use listeners, or maybe the simplest way exists. Or maybe some stateful or stateevents.
If you want to attach a listener, this can be useful:
{
text: 'Permissions',
dataIndex: 'permissions',
width: 350,
renderer: function(value, cell, record) {
var prefix = 'MyCheckBox_' + record.get('name') + '_';
var s = '';
for (var variable in value) {
s = s + '<input type="checkbox" ';
s = s + 'id="' + prefix + variable + '" ';
if (value[variable] == 1) {
s = s + 'checked ';
};
s = s +
'onclick="'+
'var r = Ext.getCmp(\'MyGridPanel\').getSelectionModel().getSelection()[0]; ' +
'var p = r.get(\'permissions\'); ' +
'p[\'' + variable + '\'] = (document.getElementById(\'' + prefix + variable + '\').checked ? 1 : 0); ' +
'r.set(\'permissions\', p); ' +
'r.commit(); ' +
'" ';
s = s + '>' + variable;
}
console.log(value);
return s;
}
}
Notes:
This example is tested with ExtJS 4.2.
With this code, the check state of checkbox is only written in the store, nothing more. You can write different handling function.