View Full Version : Rendering a checkbox in a row edit grid

29 Mar 2012, 5:12 AM
I haven't been able to get any of the solutions I have located via searching to work so am looking for guidance as to how to make a boolean column draw as a checkbox on a grid which implements a rowedit plugin.

The solution I have (included below) uses the images from the default theme menu, it requires me to enter an absolute path name to the image because it's not in the css file itself which is a terrible kludge. I have tried using the x-grid-3-check-col style but failed to get that to work - the element showed that no background image was in the final style even thought it was applied, that stumped me, no idea why or what to try next.

Anyway - here is a short class you might be able to look at and fix - or if you have renderer you can post that would be great too.


Ext.define('MyApp.renderer.Checkbox', {

renderBool: function(val,p) {
// p.tdCls += ' x-grid3-check-col-td';
// return '<div class="x-grid3-check-col'+(val==true?'-on':'-on')+'">'+val+' </div>';

// return "<input type='checkbox' disabled='true' " + (val ? "checked='checked'" : "") + " ondblclick='return true;'>";

//return '<span class="x-grid3-check-col'+(val==true?'-on':'')+'">'+val+'</span>';

// return "<div class='x-grid3-check-col' style='x-grid3-check-col-on'> </div>";

var checkedImg = initClientHomeURL+'/ext-4.0.7-gpl/resources/themes/images/default/menu/checked.gif'; // really really not happy about this.
var uncheckedImg = initClientHomeURL+'/ext-4.0.7-gpl/resources/themes/images/default/menu/unchecked.gif';
var cb = ''
+ '<div style="text-align:center;height:13px;overflow:visible">'
+ '<img style="vertical-align:-3px" src="'
+ (val ? checkedImg : uncheckedImg)
+ '"'
+ ' />'
+ '</div>'
return cb;


29 Mar 2012, 7:56 AM
Have you tried the CheckColumn that is in the examples/ux/ directory?

29 Mar 2012, 3:16 PM
Thanks Mitchell - you hit the nail on the head - it didn't even occur to me that this example would be using the same mechanism to render the checkbox.