select a one of the containers from panel in extjs

Question

Extjs 4.1.1(a), In my project, there is a panel (with Id #monthCalendar) which has 42 containers inside it in a View. I am trying to create a controller for that view. Here the controllers action is to show "hello" message whenever I click on any of the container inside the panel. I tried the following which is not showing any kind of error in chrome console.

In my controller:

onLaunch: function(){
    Ext.each(Ext.ComponentQuery.query('#monthCalendar container'),function(container){
        container.on('click',function(){
            alert("hello");
        },container,{element: 'el'})
    })
}

Answer 1

This one should work

Ext.each(Ext.ComponentQuery.query('#monthCalendar container'),function(c){
    c.on({ click: {fn: function(){ alert("hello"); },scope: this, element:'el' }})
})

Answer 2

It seems the containers inside the panel were not redered when the click event was called.(though, the containers were visible on the page. I don't know what possibly the bug is?) So, instead of using onLaunch, I used init template in which I called the render event (indirectly called the click event) and this worked.

init: function(){
    this.control({
        '#monthCalendar container': {
            render: this.onContainerRendered
        }
    })
},
onContainerClicked: function() {
    alert('The container was clicked');
},
onContainerRendered: function(container) {
    container.on('click',this.onContainerClicked,container,{element: 'el'})
},

Working Fiddle