Display group of checkboxes in a row inside the grid column ExtJs - checkbox

Question

I am new to ExtJS and I am trying to display the group of checkboxes in this way:
I have the following code:
Ext.onReady(function() {
var ct = Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Tasks',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: '50%',
scrollable: true,
bodyStyle: 'padding:10px',
html: MyTest.description
},{
collapsible: false,
region: 'center',
margins: '5 0 0 0',
items: [{
xtype: 'grid',
id: 'MyGridPanel',
title: 'Test Grid',
store: {
fields: ['name', 'permissions'],
proxy: {
type: 'memory',
reader: {type: 'json'}
},
data: [{
name: 'Farms',
permissions:{
'manage': 1,
'clone': 1,
'launch': 0,
'terminate': 0,
'not-owned-farms': 0
}
},{
name: 'Alerts',
permissions:null
},{
name: 'Servers',
permissions:null
},{
name: 'Events and notifications',
permissions:null
},{
name: 'Statistics',
permissions:null
},{
name: 'Roles',
permissions:{
'manage':1,
'clone':0,
'bundletasks':0
}
},{
name: 'Scripts',
permissions:{
'manage':0,
'execute':0,
'fork':0
}
}]
},
columns: [{
text: 'Name',
width: 200,
dataIndex: 'name'
},{
text: 'Permissions',
dataIndex: 'permissions',
// I need to insert here a checkbox groups for elements that have permissions I guess. So what should I use here - renderer, handle?
}],
}]
}]
});
So what should I use for that? For example if I use renderer (not sure if it's ok to use it) I can receive all the data for checkboxes (see code below), but I am not sure how to render it.
renderer: function(value, meta, rec, rowIdx, colIdx, store, view) {
var checkboxconfigs = [];
for (var variable in value) {
checkboxconfigs.push({
boxLabel: variable,
name: variable,
inputValue: value[variable],
checked: value[variable]
})
}
var checkboxes = new Ext.form.CheckboxGroup({
id:'chkGroup',
fieldLabel: 'Permissions',
columns: 1,
items: checkboxconfigs
});
// return WHAT?;
}
I would be grateful for help!

Answer 1

Solution:
If you want to render the values, try with this column definition:
{
text: 'Permissions',
dataIndex: 'permissions',
width: 200,
renderer: function(value, cell) {
var s = '';
for (var index in value) {
s = s + '<input type="checkbox" ';
if (value[index] == 1) {
s = s + 'checked';
};
s = s + '>' + index;
}
return s;
}
}
Notes:
Tested with ExtJS 4.2.

Answer 2

You can do it like below:
renderer: function (value, meta, rec, rowIdx, colIdx, store, view) {
var doms = '';
for (var variable in value) {
var temp = value[variable] === 1 ? 'checked' : '';
doms += '<input type="checkbox" name="' + variable + '" value="Car" ' + temp + '>' + variable
}
return doms;
}
Working fiddle.