Im using renderer function as below and want to hide/show specific checkcolumn-cells depending on variable record.data.hidden
in my gridview.
{
xtype: 'checkcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
/*
if (record.data.hidden === true) {
// checkbox hidden
} else {
// checkbox shown
}
*/
},
itemId: 'mycheck',
bind: {
text: '{warranty}'
}
}
How do i do this?
You can use the metaData
passed to the renderer function to apply styling to the cell element, see the documentation here.
One easy way is to set the display
CSS property depending on your criteria. This will be applied to the HTML <td>
element created by Ext JS for the cell.
Try this:
{
xtype: 'checkcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.hidden === true) {
metaData.tdStyle = 'display: none;';
} else {
metaData.tdStyle = 'display: table-cell;';
}
return value;
},
itemId: 'mycheck',
bind: {
text: '{warranty}'
}
}
(I am not sure about the right syntax, maybe you don't need the semicolon after none
and table-cell
, and maybe you have to use quotations somewhere. Try it.)
But you create a CSS style and use tdCls
as well, and perhaps also tdAttr
but I am not sure about the latest.