dynamically setting up id for containers in sencha touch 2

[neha9786]

I have a container on my screen which in turn has 3 containers inside it. I am achieving this by creating those 3 containers in a for loop at run time in my controller class and setting up an Id for each of them. By doing this, i want to listen to the individual sub container on tap and showing up a different screen on tap of each one of the sub containers. even though i am able to listen to my sub containers on tap on my screen, it is not recognizing the id that i have setup on creating in my previous for loop..it is only recognizing one of the sub containers by active item field.. can anyone suggest how do i make separate actions for each tap on my 3 different sub containers on the screen?

[bluehipy]

You don t need separate actions necessarily, you can distinguish between containers inside the handler:

handlerTap:function(container)
{
     var id = container.get('id'); //or itemId
     switch(id)
    {
           case 'nasty_container_1': do_bad_things_to(1);break;
           case 'nasty_container_2': do_bad_things_to(1);break;
           case 'nasty_container_3': do_bad_things_to(1);break;
           default: console.log('uncaught container id');
    }
     
} 

but if you want different handlers for each container

refs:{
    bmfContainer1 : 'container[itemId=bmf_1]',
    bmfContainer2 : 'container[itemId=bmf_2]',
    bmfContainer3 : 'container[itemId=bmf_3]'
},
control:{
      bmfContainer1:{
                 tap:'handlerTap1'
      },
      bmfContainer2:{
                 tap:'handlerTap2'
      },
      bmfContainer3:{
                 tap:'handlerTap3'
      },
}
initialHandlerYouHave:function()
{
       for(var i=0;i<3;i++)
       {
                   this.getMainContainer().add(
                                 {
                                       xtype:'container', 
                                       itemId: 'bmf_'+(i+1)
                                   }
                      );
       }
},
handlerTap1:function(container)
{
      console.log('tap 1');
},
handlerTap2:function(container)
{
      console.log('tap 2');
},
handlerTap3:function(container)
{
      console.log('tap 3');
} 

pam - pam!

[neha9786]

as per my app design, the no of sub container will keep on varying.. so i can not use ref and control using IDs as i have created them at runtime.. i have used the xtype of the container in my ref and control to capture the event and it has the items that i have created inside.. bt it doesnt recognize the id for the sub-container that i have created..

[bluehipy]

Follow the patter of the first approach I have described and you will solve the issue.

[neha9786]

thanks for your reply but i am generating the count of containers at runtime so i am not sure if it will be 3 everytime..so in my ref as you mentioned i can not have

bmfContainer1 : 'container[itemId=bmf_1]',

[bluehipy]

Yes... and I told you that first pattern can apply to that too.
Because you generate containers at run time, I suppose they share the same class (?) even if they don't you can add some property they will all have s you can define a selector for them.

control:{
     "container[cls=myDynamicContainer]":{
             tap:"handlerTap"
     }
},
initialHandlerYouHave:function()
{
      var containersCount = this.getContainersCount(); // you know how you get this :))
       for(var i=0;i<containersCount ;i++)
       {
                   this.getMainContainer().add(
                                 {
   xtype:'container', //you can create a custom type extending Ext.Container
   index:i,
   cls:'myDynamicContainer'//you can also use anything you want as property, even a custom one
   
                                   }
                      );
        }
},

handlerTap:function(container)
{
          alert( tap on ' + container.getInitialConfig().index );
} 

pam - pam?