sencha触摸控制器无法在导航视图中工作

时间:2014-03-20 07:09:43

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

我正在使用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')
}

});

如果我使用按钮处理程序,那么它一直都能正常工作,但它只会给控制器带来问题。

1 个答案:

答案 0 :(得分:3)

我更改了控制器的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'
    }
]
}
});