0

我创建了一个非常简单的应用程序来测试带有 Sencha Touch 的原生 Android 应用程序。我有两个面板。在第一个面板中点击按钮时，必须打开第二个面板。在我的浏览器中效果很好，但是当我创建一个原生 Android 应用程序时，只显示初始视图。当我点击按钮时，不会显示第二个视图。

这是我的代码：

Ext.application({
views: [
    'MyPanel',
    'MyPanel1'
],
controllers: [
    'MyController1'
],
name: 'MyApp',

launch: function() {

    Ext.create('MyApp.view.MyPanel', {fullscreen: true});
} });

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',

config: {
    items: [
        {
            xtype: 'button',
            itemId: 'mybutton',
            text: 'V1'
        }
    ],
    listeners: [
        {
            fn: 'onMybuttonTap',
            event: 'tap',
            delegate: '#mybutton'
        }
    ]
},

onMybuttonTap: function(button, e, eOpts) {
    this.fireEvent('getPan1');
}
});


Ext.define('MyApp.view.MyPanel1', {
extend: 'Ext.Panel',
alias: 'widget.mypanel1',

config: {
    items: [
        {
            xtype: 'button',
            itemId: 'mybutton1',
            text: 'V2'
        }
    ],
    listeners: [
        {
            fn: 'onMybutton1Tap',
            event: 'tap',
            delegate: '#mybutton1'
        }
    ]
},

onMybutton1Tap: function(button, e, eOpts) {
    this.fireEvent('getPan');
}

});

Ext.define('MyApp.controller.override.MyController1', {
override: 'MyApp.controller.MyController1',

config: {
    refs: {
        myView: 'mypanel',
        myView2: 'mypanel1'
    },
    control: {
        myView: {
            getPan1: 'getPan1'
        },
        myView2: {
            getPan: 'getPan'
        }
    }
},

getPan1: function(){
    var a = Ext.create('MyApp.view.MyPanel1', {fullscreen: true});
    a.show();
},

getPan: function(){
    var a = Ext.create('MyApp.view.MyPanel', {fullscreen: true});
    a.show();
}
});

在我看来，在本机应用程序中，事件未在控制器中捕获。我究竟做错了什么？

4

2 回答 2

0

app.js

Ext.application({
views: [
    'MyPanel',
    'MyPanel1'
],
controllers: [
    'MyController1'
],
name: 'MyApp',

launch: function() {
    console.log("appstart");
    Ext.create('MyApp.view.MyPanel', {fullscreen: true});
}

});

应用程序/控制器/MyController1.js：

Ext.define('MyApp.controller.override.MyController1', {
override: 'MyApp.controller.MyController1',

config : {
    refs : {
        mybutton : 'mypanel button[text="V1"]'
    },
    control : {
        mybutton : {
            tap : 'tappedButtonFunction'
        }
    }
},

tappedButtonFunction : function(){
        console.log("Tapped");
        Ext.Msg.alert("Test");
        // Do something
    }
});

应用程序/视图/MyPanel.js

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',

requires: [
    'Ext.MessageBox'
],

config: {
    id: 'PanelID',
    items: [
        {
            xtype: 'button',
            id: 'mybutton',
            text: 'V1'
        }
    ]
}

});

但是控制器没有在本机应用程序中捕获事件。

于 2013-05-31T19:34:08.627 回答
0

试试这个按钮代码：

{
    xtype : 'button'
    id : 'mybutton',
    text : 'V1',
    listeners : {
        tap : function(){
            alert("tapped button");
        }
    }
}

或者，如果您希望从控制器内部调用该函数（这始终是可取的），那么您的按钮代码将变为 ::

{
    xtype : 'button'
    id : 'mybutton',
    text : 'V1'
}

在您的控制器内部，您将获得以下信息

config : {
    refs : {
        mybutton1 : 'panelID button[text="V1"]'
    },
    control : {
        mybutton1 : {
            tap : 'tappedButtonFunction
        }
    }
},

tappedButtonFunction : function(){
    alert("tapped this button");
    // Do something
}

此外，在不使用覆盖的情况下尝试您的代码。它应该工作。我以前从未见过它，您可以覆盖自己的代码，而不仅仅是简单地编码。

于 2013-05-31T13:56:00.843 回答