Attaching Events to Elements created via a renderer function in Grid?

[danp]

Howdy All,

I am setting up a non-editable grid that acts as a way to give a user permissions (See attached screenshot)

What I am attempting to do is attach an event to the checkbox in the last column that either checks or unchecks all the checkboxes in previous columns however I keep getting hung up on the fact that renderers as far as I can tell are only allowed to return strings, not html element objects.

I know it is possible to attach a click handler to the cells, but I would really prefer not to do this as I want it to be an event on the checkbox.

Am I missing something obvious here?




this.renderers =
{
checkbox: function(value, meta, record, row, column, store)
{
// not all permissions are available for all sections
if (!YAHOO.lang.isNull(value) && !value.available)
{
return;
}

var cb =
{
tag: 'input',
type: 'checkbox'
}
// if value is null then this is the 'check all' checkbox and does not need a name/value
if (!YAHOO.lang.isNull(value))
{
cb.name = 'FS_ID' + record.get('functionalSectionID').replace(/\-/, '_') + '_' + record.get('siteID');
cb.value = value.value
}
else
{

}
// I really wish I could return a dom object that I have attached events to and am about to look into hacking the Ext code to let me, please help!
return Ext.DomHelper.markup(cb);
}
}

[BernardChhun]

why don't ya wait for the dataStore's load event to add listeners to your checkboxes by using DomQuery?

and I'd probably use event delegation on that last column because it looks like you have a lot of lines in there. if you have 50 lines, thats also 50 listeners...

some sample code :



ds.on("load", function(){
Ext.select("the-appropriate-column-dom-element").on("click", function(e){
var el = e.getTarget();
// check if it's a checkbox that has been clicked on
// if it's a checkbox, call the appropriate function
}, this, true);
}, this, true);

[danp]

Bernard,

Thanks a bunch, I will try this out when I get back to work on Monday.