Sencha Touch 2.1 tap entire toolbar

Question

I need to be able to tap/click on the entire toolbar at the bottom of my page and either go to another screen or have a popup.

Why you ask? Because I have a logo for now as my title. Plus this was the easiest way with the least code I could figure out to get a logo at the bottom, that was docked, and did not change as the pages changed. Essentially my toolbar is a link or popup to an "about" page.

Here is what I have that seems to work with buttons.

{
  xtype : 'toolbar',
  docked: 'bottom',
  title: '<img src="logo.png" id="logo" alt=""/>',
  handler: function() {
    Ext.Msg.alert('About', 'You clicked about');
  }
}

I also tried this with no luck.

{
  xtype : 'toolbar',
  docked: 'bottom',
  title: '<img src="logo.png"/>',
  listeners: {
    tap: function() {
      alert("You tapped me");
    }
  }
}

Thanks, Donnie

I would not call this and answer but I did keep at google and found a solution that will work by clicking on the logo but not the entire toolbar. I had to create a new toolbar item as xtype image and add a tap listener to my image. Then add my ext.msg.alert() to the listener. — DonnieCrump, Jan 09 '13 at 20:32

score 3 · Accepted Answer · answered Jan 10 '13 at 04:05

You can just simply do like this:

{
    xtype : 'toolbar',
    docked: 'bottom',
    title: '<img src="logo.png"/>',
    listeners: {
        initialize: function() {
            this.element.on({
                tap: function() {
                    alert("You tapped me");
                }
            })
        }
    }
}

Hope it helps :)

Sencha Touch 2.1 tap entire toolbar

1 Answers1