View Full Version : custom checkbox for grid.

23 Aug 2012, 12:16 AM
Hi Guys,

Below is one of the custom grid panel which as 2 checkcolumn for checkbox and another gridcolumn,
I have to change the CSS for checkbox to override the default checkbox image with a custom image(which i have).


1. In column 1 i need to show the chekbox with green symbol and Column 2 i need to show with red symbol.
2 In a small analysis i found i need to overrride the .x-grid-checkheader and .x-grid-checkheader-checked under chekheader.css

I am a noob in CSS and dont have much expertise

3. point now is .x-grid-checkheader-checked class has to perform different ways for 2 different checkcolumn, to show green and red as explained above. So HOW to do this ???

if i will override .x-grid-checkheader-checked in my css, this will reflect in BOTH the checkbox
.x-grid-checkheader-checked-want {
background-image: url('."MYIMAGE");

But i need to diffrentiate the background-image for checkcolumn1 and checkcolumn2

4. another alternative i tried here was to addCls() on the checkchange listener for checkbox :(
var id = column.getId(); // gridcolumn-1019
var cells = Ext.DomQuery.select('.x-grid-cell-'+id);


which turned out not to work.... please help.

To summarize all the above, i have 2 checkcolumn and want to have a custom checkbox for both. checkcolumn1 will have a new checkbox img for checked showing green and checkcolumn2 will have a new checkbox img for checked showing red.
For both unchecked will remain as default img from framework.

Please reply.


23 Aug 2012, 4:46 AM

Copied CheckColumn.js from ux folder to my views, modified the renderer function where i have handled to take the record for grid and using id's of checkbox called appropriate styles.

code from checkcolumn.js

renderer : function(value,metaData, record){
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader-unchecked'];
if (value) {
cls.push(cssPrefix + 'grid-checkheader-checkedCustomWant');
else if(record.data.dwant===true){
if (value) {
cls.push(cssPrefix + 'grid-checkheader-checkedCustomDont');
return '<div class="' + cls.join(' ') + '"> </div>';