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
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.