PDA

View Full Version : Add onClick Event Listener to Panel



robando
2 Aug 2010, 3:59 PM
I'm fairly new to Sencha Touch so please forgive my ignorance but I've been trying to add an onClick listener to a panel that I'm creating. I'm using the panel to simulate tabs down the side of another panel otherwise I would simply use buttons. I've tried to do the following with now success...


var tabEnterOrder = new Ext.Panel({
html: '<div class="label"><img class="label" src="images/tabLabel_EnterOrder.png"/></div>',
cls: 'sideTab'
});
tabEnterOrder.on('click', function() {alert('You clicked me');});

Any suggestions?

evant
2 Aug 2010, 4:30 PM
You need to bind it on the underlying element:



tabEnterOrder.body.on(....);

robando
2 Aug 2010, 4:38 PM
Thanks for the quick reply Evan. Unfortunately I tried the following...


var tabEnterOrder = new Ext.Panel({
html: '<div class="label"><img src="images/tabLabel_EnterOrder.png"/></div>',
cls: 'sideTab'
});
tabEnterOrder.body.on('click', function() {alert('You clicked me');});

...and had no luck. As a matter of fact the page won't even render when I make this modification. Any other suggestions?

evant
2 Aug 2010, 10:54 PM
It's not a matter of luck ;)

When you look at the error in Chrome, you'll see it say something about body being null or not an object. It's because the panel isn't rendered yet.

We're looking at a way to provide inline DOM listeners for touch, so you can bind them like you'd bind anything else.

robando
3 Aug 2010, 8:47 AM
so I can only add the listener once the item as been rendered?

evant
3 Aug 2010, 8:59 AM
You can't add a listener to an element until it's in the dom DOM, no.

robando
3 Aug 2010, 10:07 AM
thanks so much for your help Evan!

robando
3 Aug 2010, 10:52 AM
For anybody else who is interested in the solution I've had to do this:

var tabEnterOrder = new Ext.Panel({
ui: 'plain',
html: '<img src="images/tabLabel_EnterOrder.png"/>',
cls: 'sideTab'
});
tabEnterOrder.on('afterrender', function(){
this.body.on('click', function(){setActive(tabEnterOrder)});
});

It's a bit of a workaround but it works just fine.

Thanks for all your help, Evan!

--rO