Sencha touch listening to phonegap events - events

Question

I'm trying to get Sencha Touch to listen to the events phonegap gives off, any help I can find online only points to sencha events. I've also tried setting up listeners and " .on " but it doesn't seem to work on outside events.
I'm not talking about any specific event, just any event like 'resume', or 'batterystatus'.
Please don't reply with a reference to Ext.device because Sencha support for Ext.device is limited and outdated as it always has been when one company tries to provide a wrapper around a different company, I'd like to take full advantage of all the features the most up-to-date phonegap version offers.

Answer 1

You should be able to add PhoneGap-specific listeners like this:
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...
}

Answer 2

You can do something like this, I have tested it and it's working!
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");
}
...
});
Edited:
Turn out it's not a very good idea to put the handler in the app.js file (although it will still work anw). Because if you upgrade sencha, it expects this file not to be modified much.
So you should instead put it in your launch function of a main controller. Controllers' launch function are executed after Application's launch function.
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");
}
...
});