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'})
    })
}

@MolecularMan why you deleted your post? It worked. – Mr_Green Mar 07 '13 at 08:44 — Mr_Green, Mar 07 '13 at 08:44

score 3 · Accepted Answer · answered Mar 07 '13 at 08:13

3

This one should work

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

answered Mar 07 '13 at 08:13

sra

23,820
7
55
89

Thanks for response. This is not working. If I give query as `#monthCalendar` or `container` instead of `#monthCalendar container`, the function works properly. what could be the error here? I am 100% sure that the panel has these containers(adding dynamically). – Mr_Green Mar 07 '13 at 08:35
1

@Mr_Green Please see this working **[JSFiddle](http://jsfiddle.net/sran/QkPu6/)** And be sure that all components are rendered!! F.e. call this not onLaunch but afterrender of #monthCalendar instead. – sra Mar 07 '13 at 09:38
sorry I got the solution from a user who deleted his post. I container was not redered when click event was called. – Mr_Green Mar 07 '13 at 09:42
@Mr_Green Why are you sorry :) And see my last comment, it stated the same ;) – sra Mar 07 '13 at 09:46
yes saw that now :). I am marking you as answer because I will get two points :D (hungry for points) and also you helped me alot in extjs. Thanks. – Mr_Green Mar 07 '13 at 09:50
@Mr_Green Hehe. Glad to help and thanks for accepting. So here are your points ;) – sra Mar 07 '13 at 10:11

Mr_Green · Answer 2 · 2013-03-07T09:57:58.017

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

select a one of the containers from panel in extjs

2 Answers2