Sencha touch 监听 phonegap 事件答案

【问题标题】：Sencha touch listening to phonegap eventsSencha touch 监听 phonegap 事件
【发布时间】：2013-06-11 13:46:24
【问题描述】：

我正在尝试让 Sencha Touch 收听 phonegap 发出的事件，我可以在网上找到的任何帮助都只指向 sencha 事件。我也尝试过设置监听器和“.on”，但它似乎不适用于外部事件。

我不是在谈论任何特定事件，只是像“resume”或“batterystatus”这样的事件。

请不要回复对 Ext.device 的引用，因为 Sencha 对 Ext.device 的支持是有限且过时的，因为当一家公司试图为另一家公司提供包装时，我想采取充分利用最新 phonegap 版本提供的所有功能。

【问题讨论】：

标签： events extjs sencha-touch cordova

【解决方案1】：

您应该能够像这样添加特定于 PhoneGap 的侦听器：

document.addEventListener("deviceready", function() {
    document.addEventListener("backbutton", MyApp.backButtonListener, false);
    document.addEventListener("menubutton", MyApp.menuButtonListener, false);
}, false);

MyApp.backButtonListener = function(e) {
    e.preventDefault();
    //do other stuff here...
}

MyApp.menuButtonListener = function(e) {
    e.preventDefault();
    //do other stuff here...
}

【讨论】：

您不需要使用 deviceready，因为 Sencha Touch 在 deviceready 事件触发后等待加载。 --- 这仅适用于类中的静态方法，而不适用于实例类。对类实例的回调呢，我很确定 Sencha 有一些方法可以轻松做到这一点。

【解决方案2】：

你可以做这样的事情，我已经测试过它并且它正在工作！

Ext.application({
    name: 'TestApp',   
    ...
    launch: function() {
        // Hook up events of PhoneGap here
        document.addEventListener("pause", this.onPause, false);
        document.addEventListener("resume", this.onResume, false);

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('TestApp.view.Main'));
    },
    onPause: function() {
        // this code is fine but using 'this' here is not safe 
        console.log("onPause");
    },
    onResume: function() {
        console.log("onResume");
    }
    ...
});

已编辑：
事实证明，将处理程序放在 app.js 文件中并不是一个好主意（尽管它仍然可以正常工作）。因为如果你升级 sencha，它希望这个文件不会被太多修改。

所以你应该把它放在你的主控制器的启动函数中。 Controller的launch函数在Application的launch函数之后执行。

Ext.define('TestApp.controller.Main', {
    extend: 'Ext.app.Controller',
    ...
    launch: function() {
        // Hook up events of PhoneGap here
        document.addEventListener("pause", this.onPause, false);
        document.addEventListener("resume", this.onResume, false);
    },
    onPause: function() {
        // this code is fine but using 'this' here is not safe 
        console.log("onPause");
    },
    onResume: function() {
        console.log("onResume");
    }
    ...
});

【讨论】：