PDA

View Full Version : Trying to use renderTpl inside a panel...



MikeB
15 Aug 2012, 2:05 PM
I'm trying to render my own content inside a panel which contains links and buttons. I've tried using a standard xTemplate to generate the content and then grab onto the links and buttons via a select and adding a handler:


var pTemplates = thisCtl.getPTemplates();
var btns1 = pTemplates.el.select("button");
btns1.on("click", this.HandleTemplateBtnClicks, this);

However, for some reason this doesn't always appear to work (not sure if it's timing dependent or not).

So, I thought about using a renderTpl which allows me to use the renderSelectors.
This method has it's own complications as it looks like my custom renderTpl overrides the original structure of the panel, plus I don't see how I could update the content after render time (the data that's needed for the renderData comes from an Ajax call after render time).

So, my question is, would a renderTpl be the best way to go or should I try to figure out why my assigning handlers to elements of an xTemplate doesn't appear to be 100% reliable?

What is the best/most reliable way to grab "selectors" from a rendered xTemplate like the "renderSelectors" list for a renderTpl?

Thanks
MikeB

skirtle
15 Aug 2012, 3:23 PM
I think I'd probably try something like this:


var panel = Ext.create('Ext.panel.Panel', {
data: {name: 'Gary'},
renderTo: Ext.getBody(),
title: 'Title',
tpl: 'My name is {name}'
});

...

// Update the data in the template
panel.update({name: 'John'});

To attach the listeners I'd be tempted to go for an event delegation approach. Attach the event to the panel or panel body then use a delegate to target the links and buttons within the panel. It'll avoid timing issues and it's generally more efficient. Something like this:


panel.body.on('click', clickHandler, scope, {delegate: 'button'});

MikeB
15 Aug 2012, 4:07 PM
Thanks, I'll give that a try. Never knew about "delegate" before.

I think I'd probably try something like this:


To attach the listeners I'd be tempted to go for an event delegation approach. Attach the event to the panel or panel body then use a delegate to target the links and buttons within the panel. It'll avoid timing issues and it's generally more efficient. Something like this:


panel.body.on('click', clickHandler, scope, {delegate: 'button'});

MikeB
16 Aug 2012, 6:04 AM
Thanks Skirtle, your method works like a charm (now to run it through my testers to see if it works ALL the time!)

MikeB