javascript - sencha touch Controller 在导航 View 中不起作用

Question

我正在使用 Sencha Touch 2.3。在我的应用程序中，我使用导航 View 。

问题: 在按钮的点击事件上我推送了一个 View ，其中有一个名为“second button”的按钮，而“second button”在点击事件(使用 Controller )时有一条警告消息。

导航和按钮点击事件只有一次工作正常，但有一次当我返回然后前进并点击“第二个按钮”时 Controller 无法正常工作。导航工作正常，但我无法第二次收到警告框。

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

});

如果我使用按钮的处理程序，那么它一直都可以正常工作，但它只会给 Controller 带来问题。

Answer 1

我为您的 Controller 更改了 ref 属性并为第二个按钮添加了 action 属性，它起作用了。这是我的更改。

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