Results 1 to 8 of 8

Thread: Add onClick Event Listener to Panel

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    1
      0  

    Default Add onClick Event Listener to Panel

    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?

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,235
    Vote Rating
    1015
      0  

    Default

    You need to bind it on the underlying element:

    Code:
    tabEnterOrder.body.on(....);
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    1
      0  

    Default

    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?

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,235
    Vote Rating
    1015
      0  

    Default

    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    1
      0  

    Default

    so I can only add the listener once the item as been rendered?

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,235
    Vote Rating
    1015
      0  

    Default

    You can't add a listener to an element until it's in the dom DOM, no.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Ext User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    1
      0  

    Default

    thanks so much for your help Evan!

  8. #8
    Ext User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    1
      0  

    Default

    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

Similar Threads

  1. Radio/CheckBox event listener onClick fires twice on label
    By stiptkevin in forum Ext GWT: Discussion
    Replies: 8
    Last Post: 20 Dec 2016, 1:04 PM
  2. add onClick event to an DropTarget
    By ghatfan99 in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 1 Jul 2010, 7:39 AM
  3. Problem with ComponentPlugin and Listener for OnClick-Event
    By PatrickFries in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 6 Apr 2010, 7:08 AM
  4. Add listener to expand Panel onclick
    By qtax87 in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 7 Nov 2008, 12:15 AM
  5. Add onclick event on tree
    By wehtam in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 31 Jul 2007, 3:57 AM

Posting Permissions

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