Ext.device.notification.show creating errors in Phonegap - Sencha Touch 2

Question

I have a Sencha Touch 2 project and everything works great in the web browser. No errors in the console, and everything looks good. Once I package it with Phonegap and run it on a mobile device, however, things don't work as well.

I am using ext.device.notification.show in two places in my application. At first, I was doing requires: 'Ext.device.*' and while it worked in web, the app wouldn't run on mobile and eclipse would give me the error message Uncaught TypeError: Cannot read property 'name' of undefined. I switched over to requires: Ext.device.Notification (exact spelling and capitalization) and now the app runs but when I click a button that should create a message box, I get the error Uncaught TypeError: Cannot call method 'confirm' of undefined. The problem is I have no method called confirm. In one case I have a method called confirmItem, but for the second button that should be invoking a message box I have no method remotely close to "confirm."

I'll post one of the controllers below (this one has the confirmItem method):

Ext.define('MyApp.controller.MainController',
{

extend: 'Ext.app.Controller',
requires: ['Ext.device.Notification'],

config:
{
    refs:
    {
        mainView: 'mainview',

        btnConfirm: 'mainview button[action=confirmItem]',

    },
    control:
    {

        'btnConfirm':
        {
            tap: 'confirmItem'
        },
        mainView:
        {
            onSignOffCommand: 'onSignOffCommand'
        }
    }
},


// Transitions
getSlideLeftTransition: function ()
{
    return {
        type: 'slide',
        direction: 'left'
    };
},

getSlideRightTransition: function ()
{
    return {
        type: 'slide',
        direction: 'right'
    };
},

onSignOffCommand: function ()
{

    var me = this;

    console.log('Signed out.');
    loginView = this.getLoginView();
    //MainView.setMasked(false);

    Ext.Viewport.animateActiveItem(loginView, this.getSlideRightTransition());

},

confirmItem: function ()
{
    Ext.device.Notification.show(
    {
        title: 'Confirm',
        message: 'Would you like to Confirm?',
        buttons: ['No', 'Yes'],
        callback: function (button)
        {
            if (button == "Yes")
            {
                MyApp.app.getController('MainController')
                    .confirmPickup();
            }
            else
            {
                console.log('Nope.');
            }
        }

    });
},

confirmPickup: function ()
{

    var me = this;

    var loginStore = Ext.getStore('LoginStore');
    mainView = this.getMainView();
    mainView.setMasked(
    {
        xtype: 'loadmask',
        message: ' '
    });

    if (null != loginStore.getAt(0))
    {
        var user_id = loginStore.getAt(0).get('id');
        var name = loginStore.getAt(0).get('name');
        var winner = loginStore.getAt(0).get('winner');
    }

    if (winner === 1)
    {
        console.log('success');



    }
    else
    {
        console.log('fail');
    }


}


});

I only assume this is a problem because whenever I push the button that should be calling confirmItem I get the error. Am I using Ext.device.Notification correctly, or Have I missed something needed to make it work in Phonegap?

Answer 1

I found the solution! Everything was fine from a Sencha Touch point of view in terms of using requires: Ext.device.Notification but some things were missing on the Phonegap side. Specifically, I needed to install the appropriate plugins.

Open a terminal and type: Phonegap local plugin list to see your currently installed plugins. I had none. I went ahead and installed:

org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.vibration 

by using the following reference: http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html and selecting options from the menu on the left.