sencha 触摸控制器在导航视图中不起作用答案

【问题标题】：sencha touch controller not work in navigation viewsencha 触摸控制器在导航视图中不起作用
【发布时间】：2014-03-20 07:09:42
【问题描述】：

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

问题：在按钮的点击事件上，我按下一个视图，其中有一个名为“第二个按钮”的按钮，而“第二个按钮”在点击事件上有一个警报消息（使用控制器）。

导航和按钮单击事件只有一次完美运行，但是当我返回然后前进并单击“第二个按钮”时，控制器不起作用。导航工作正常，但我无法第二次获得警报框。

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（控制器）

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

});

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

【问题讨论】：

标签： javascript android extjs sencha-touch sencha-touch-2

【解决方案1】：

我更改了控制器的 ref 属性并为第二个按钮添加了 action 属性，它可以工作。这是我的更改。

test.js（控制器）

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

【讨论】：