sencha touch controller not work in navigation view

Question

I am using Sencha Touch 2.3. In my application i use navigation view.

Problem: on click event of button i push one view, Which has one button named "second button", and "second button" has one alert message on click event(using controller).

Navigation and button click event are working perfect only one time, but once when i am going back and then going to forward and click on "second button" at that time controller not work. Navigation is working fine but i can't not get alert box second time.

Main.js

Ext.define('MyAnim.view.Main', {
extend : 'Ext.navigation.View',
alias : 'widget.Main',
requires : [
    'MyAnim.view.View3',
    'MyAnim.view.View2'
],
config : {
    id : 'nvView',
    items : [{
            xtype : 'formpanel',
            title : 'Animals',
            fullscreen : true,
            html : '<img style="fullscreen:true;" src="resources/images/all.jpg"/>',
            id : 'View1',
            styleHtmlContent : true,
            items : [{
                    xtype : 'button',
                    docked : 'bottom',
                    itemId : 'bView1',
                    margin : 10,
                    ui : 'forward',
                    text : 'Next',
                    handler : function () {
                        //use the push() method to push another view. It works much like
                        //add() or setActiveItem(). it accepts a view instance, or you can give it
                        //a view config.
                        this.up('navigationview').push({
                            xtype : 'View2',
                            title : 'Lion'
                        });
                    }
                }
            ]
        }
    ]
}
});

View2.js

Ext.define('MyAnim.view.View2', {
extend : 'Ext.form.Panel',
alias : 'widget.View2',

config : {
    fullscreen : true,
    html : '<img style="fullscreen:true;" src="resources/images/lion.jpg"/>',
    id : 'View2',
    styleHtmlContent : true,
    items : [{
            xtype : 'button',
            docked : 'bottom',
            id : 'testBtn',
            margin : 10,
            text : 'second button'
        }
    ]
}
});

test.js (controller)

Ext.define('MyAnim.controller.test',{
extend:'Ext.app.Controller',
config:{
    refs:{
        test:'#testBtn'
    },
    control:{
        test:{
            tap:'testBtn'
        }
    }
},
testBtn:function(){
    alert('second button press')
}

});

If i use handler of button then it's work fine all time but it's create problem with controller only.

Answer 1

I changed the ref property for your controller and add action property for second button and it works. Here are my changes.

test.js (controller)

Ext.define('StackOverflow.controller.test',{
extend:'Ext.app.Controller',
config:{
refs:{
    test:'navigationview button[action="second"]'
},
control:{
    test:{
        tap:'testBtn'
    }
}
},
testBtn:function(){
console.log('second button press');
}

});

view2.js

Ext.define('StackOverflow.view.View2', {
extend : 'Ext.form.Panel',
alias : 'widget.View2',

config : {
fullscreen : true,
html : '<img style="fullscreen:true;" src="resources/images/lion.jpg"/>',
id : 'View2',
styleHtmlContent : true,
items : [{
        xtype : 'button',
        docked : 'bottom',
        id : 'testBtn',
        margin : 10,
        text : 'second button',
        action: 'second'
    }
]
}
});