Sencha Touch 2: tap on container doesn't work (tap on button works fine)

Question

I have read the SO question: Controller for Buttons Sencha Touch 2 [Solved] to achieve tapping the button. It works!

Unfortunately, I need tapping on the container, not the button. Once I change xtype:'container', to xtype:'button', it taps fine and I see the console.log message so everything works fine. Once I change it back to xtype:'container', it stops working, there is no console.log message.

So, my question is: how to make tap event working for my xtype:'container'? Why does it work for buttons only? Am I missing something?

P.S. As far as I see there is no tap event for container. What's the solution then? Would making a button to have several strings of a text and a background be a solution?

OK, based on your answers, it is still unclear, how to make the button look like the container. The container is an image with two strings above. Here is my container:

{
    xtype:'container',
    cls:'home-img',
    id: 'home-img',
    layout : {
        type : 'vbox',
         align: 'middle'
    },
    items:[
          { xtype:'container',
            html:'Your current rate is:'  
          },
          { xtype:'container',
            tpl:'{rate}'
          }
          ],
},

Once I replace xtype:'container', with xtype:'button', I'm having difficulties to show {rate} parameter and unable to make two strings.

Answer 1

In Sencha, there is no tap event available for a container. A container basically works like something which can hold different inner components/elements. However, you can indeed workaround if you want a tap event to be placed on container. As you have mentioned, you can go ahead and create a button, set a background, and set some strings (But that's not what a button should be used for, though). Or you can just set HTML with the desired string and background, make it a div and set Onclick event on it.

Answer 2

I'm not a pro at sencha touch, but in this case i think you need a listener on the element. this is what works for me:

Ext.define('RSSFramework.view.ListContainer', {
extend: 'Ext.Container',

config: {
    layout: {
        type: 'fit'
    },
    listeners:[
                 {
                    element: 'element',
                    event: 'tap',
                    fn: function() {
                        console.log('TAP!');
                    }
                }
            ]
}

});