refs / control MVC problem

[gkatz]

Hi;
I have an MVC ST2.1 app with a single main controller as follows:

        refs: {
        homeBtn:'#titlebarHomeBtn',
        },
        control: {
            homeBtn: {
                tap: 'homeBtnTapped'
            }        
        }
        .....
        homeBtnTapped: function(btn,ev){...}

my main view is a simple container with a card layout. card 0 has a single button (lets call it 'go'). card 1 does not yet exist...
when pressing the 'go' button on card 0 the controller adds a view (card 1) with the home button as follows:

Ext.define('DynView', {
    extend: 'Ext.Container',
    requires: [ ...  ],
    config: {
        layout: 'fit',
        items:[{
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        id: 'titlebarHomeBtn',
                        iconCls: 'home',
                        iconMask: true,
                        align: 'left'
                    }
                ]


            }
        ]
    }
});

now, it when pressing the home button the contoller's homeBtnTapped function is called and its code switches to card 0 and destroys card 1.
Now for the second time, if I click the 'go' button, card 1 is dynamically created but the home button does not work. as if the refs/control only bonded once and cannot bind again.
is this a know behavior?
thanks.

[shepsii]

If you are using control on a controller to handle events, you have to be very careful that only one component will ever match the selector at any one time.

I imagine this is probably causing the problem here... when the DynView is removed after being shown for the first time, are you destroying it? Even if it's not visible, and still lingering in the memory in the background, it will still match the selector. So when the second DynView comes in, both potentially match, and Sencha Touch doesn't handle that well.

I've found myself using control {} less and less over time to avoid situations like this. Which is a shame because if it could match multiple items it would be much more useful. Maybe it can, and I don't know how, in which case I'm all ears!

[gkatz]

thanks for your answer.
I destroy the DynView way before I created a new one... and it still does not work.
I would post the whole code but its very hard for me to reduce my app to something that is postable...
any other suggestions?

[cyee]

Maybe initConfig() will be useful?

[gkatz]

cyee what do you mean?

[cyee]

I'm not sure

There's an initConfig() method in the controller that re-applies the configuration object. However, I'm not entirely sure that it will do what you want.

[Bunchofstring]

I'm pretty sure that when you use refs, the component query is used once and the resulting component is cached for future references. However, if you use the selector (not a ref) within the controller, it should work just fine.

control:{
    '#titlebarHomeBtn':{
        tap:'homeBtnTapped'
    }
}

[cyee]

Oh, right. Yes, that should work.

[gkatz]

thanks guys!
on the button definition I added a custom propriety attribute:

action: 'home'

and in the refs using a selector in the following way worked:

refs: {
     homeBtn: {selector: 'button[action=home]'},
..

thanks for your help