Results 1 to 6 of 6

Thread: How do I add a button to tpl

  1. #1

    Default How do I add a button to tpl

    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.

    Code:
    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:

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

  2. #2
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59

    Default

    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.

  3. #3

    Default

    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

  4. #4
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59

    Default

    Yes, i'd use the way you described, eg:

    Code:
    <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:

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

  5. #5

    Default

    Hi again,

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

    Code:
    function restHandler(){
                alert('hi');
                mainPanel.setActiveItem(singleRestaurant, {type: 'slide'});
            }
    and in my template

    Code:
    '<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

  6. #6
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59

    Default

    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

Similar Threads

  1. Button UI: Combine x-button-small with x-button-back and x-button-action
    By Benjamin Ansbach in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 21 Feb 2013, 2:05 PM
  2. Replies: 0
    Last Post: 3 Sep 2010, 12:38 PM
  3. Replies: 6
    Last Post: 12 Aug 2010, 9:40 AM
  4. Replies: 2
    Last Post: 13 Jul 2010, 5:08 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •