PDA

View Full Version : How do I add a button to tpl



reynoldsdesign
23 Mar 2011, 2:03 PM
Hello,

I'm not sure if this is possible but I have an app that isn't doing what I want. First it displays a list of restaurants from a database into a panel.


tpl: [
'<tpl for=".">',
'<div="my_div"><h2>{restaurant_name}</h2></div>',
'</tpl>'
]
this works properly and gives me a list of my restaurants. Now comes the question. I want to add a button so I have "my_div" click to another panel. I can do this with a docked item but this idea won't work since you can click any restaurant and get their info.

I assume I would need to somehow call an event handler (which I can get working from a docked item). I'm basically stuck on how to add a button to a template, and the sencha help is useless on this topic.

I have event handlers that look like this:


var restaurantListHandler = function(button,event){
mainPanel.setActiveItem(restaurantList, {type: 'slide', direction: 'right'});
}
Thanks

d5chris
23 Mar 2011, 3:40 PM
I have the same requirement.
Basically the only way i solved it was to put an <a href=... in the template and style it with CSS so it looks similar to a sencha button.
However if you come up with a way to actually embed a sencha button i'm all ears.

reynoldsdesign
23 Mar 2011, 6:12 PM
Hi d5chris,

glad im not the only one with that issue. i'm going to sound really stupid here but what do you put the href equal to? i'm not sure how that would work?

can it be sent to a function such as <a href="javascript:myFunction()">asdf</a>

function myFunction()

as in regular javascript tools?

thanks in advance

eric

d5chris
23 Mar 2011, 6:55 PM
Yes, i'd use the way you described, eg:


<a href="javascript:MyNamespace.myView.myHandler()">asdasd</a>

However I'm using sencha touch's MVC features, so in my case, i simply used a route eg:


<a href="#mycontroller/myaction">sdfgsdfg</a>

reynoldsdesign
24 Mar 2011, 7:26 PM
Hi again,

i'm not using a namespace so i'm not sure how i'd call it. I have tried creating the following:


function restHandler(){
alert('hi');
mainPanel.setActiveItem(singleRestaurant, {type: 'slide'});
}


and in my template



'<p><a href="javascript:restHandler()">{restaurant_address}</a></p>'


having this inside my onReady function. which didn't produce anything.

however if i put the function restHandler outside the entire Ext.setup area then the alert worked, but it didn't change the panel.

inside the onReady function i get the following error in Chrome: Uncaught ReferenceError: restHandler is not defined

thanks in advance

d5chris
24 Mar 2011, 7:49 PM
Here's what's happening:
When you're declaring restHandler inside your ext.setup, it's only being declared inside that scope.
When you're declaring it outside ext.setup, its in the global scope, but it can't see the mainPanel because mainPanel is in your ext.setup scope.

What you want, is to put it in your ext.setup like so:

window.restHandler = function(){
alert('hi');
mainPanel.setActiveItem(singleRestaurant, {type: 'slide'});
}

That way it'll be declared in the global (window) scope and be accessible from the <a>, but it'll also be able to see the mainPanel.
Cheers