Question

I have a button in a Sencha Touch 2 project.
The button gets destroyed with the view after being pressed and is rebuild after another button gets pressed.

But the button does not get the listener again.

the listener is build in the controller of the view.

 Ext.application({
 name: 'App',
 controllers: ['Main','Home'],
 views: ['Main','Home'],
 launch: function () {Ext.Viewport.add({xtype:'mainview'});} 
 });

the controller

Ext.define('App.controller.Home', {extend: 'Ext.app.Controller',
config: {
    refs: {homeView: '#homeview',backBtn: '#btn_test1'},
    control: {
        backBtn: {
             tap: function(backBtn){
                console.log('[Controller][Home] btn monatsrate - - tap');
                 Ext.Viewport.add({xtype: 'mainview'});
                 Ext.Viewport.setActiveItem(1);
             }
        },
        homeView: {
            deactivate: function (homeView){
                console.log('[Controller][Home] autodestroy homeview');
                //homeView.destroy();
                Ext.Viewport.remove(homeView);
            }
        }
    }

},
});

And the view

Ext.define("App.view.Main", {
extend:"Ext.Container",
xtype:"mainview",
config:{
    id:'mainview',
    items:[
        {
            xtype:'button',
            id:'btn_test2',
            text: 'test2'
        }
    ]
},

});

Any idea how to allow the button to get the listener back?

Answer 1

This is because the “ref” in your controller is using the id of the button to create the ref. Instead, use a different selector for your button. For example you could give your button a “name” property and give it a value of “testbutton”. Then your ref would be like

refs: {homeView: '#homeview',backBtn: 'button[name=testbutton]'},

I struggled with this same problem for buttons and list items that were created/destroyed many times throughout the application’s flow. Since then I’ve read a few times that, in general, the Sencha Touch team recommends not using the id as the selector unless you have a specific reason to. The “name” method above works very well for me. You could use lots of other css-style selectors as well (you’d have to read up on that separately).

As mentioned in a previous comment, I would accept some answers to increase the probability of getting an answer to your questions in the future. I’m just answering this one because I beat my head against the wall on this issue for 4 hours.