Threaded View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default Answered: Sencha Touch 2.x with Phonegap/Cordova 2.0

    Answered: Sencha Touch 2.x with Phonegap/Cordova 2.0


    Has anyone had any success on getting Sencha Touch 2.X to work with the latest cordova release? I've been able to get sencha touch 2.x to work with prior versions of cordova, but for some reason the same methods don't seem to be working with cordova 2.0. It appears that adding any graphical elements to the viewport from the sencha code are not executing. Any help/suggestions?

    Code Sample (relevant parts only):
    index.html:
    Code:
    <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name = "format-detection" content = "telephone=no"/> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello Cordova</title> <script type="text/javascript" src="cordova-2.0.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> document.addEventListener("deviceready", app.mainLaunch, false); </script> <script type="text/javascript"> app.initialize(); </script> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> </head>


    app.js (All Debug Statements are printed):
    Code:
    launch: function() {
           console.log('Debug 1');
                    this.launched = true;
           console.log('Debug 2');
                    this.mainLaunch();
        },            
                    
        mainLaunch: function () {
                    if (Ext.os.is.Desktop) {
                    device = true;
                    }
                    console.log('Debug 3');                
                    if(!device || !this.launched) { 
                    console.log ("Not Ready");
                    return;
                    }
                    console.log('Debug 4');
                    // Destroy the #appLoadingIndicator element
                    Ext.fly('appLoadingIndicator').destroy();      
                    // Initialize the main view
                    console.log('Debug 5);
                    Ext.Viewport.add(Ext.create('AppName.view.ViewName'));
                    console.log('Debug 6);
        },
    

  2. I was able to get PhoneGap 2.0 to work with Sencha Touch 2.

    The two things that tripped me up:
    1. in the app.json file make sure you set logger to "false" in your buildOptions parameter.
    Code:
    "buildOptions": {
            "product": "touch",
            "minVersion": 3,
            "debug": false,
            "logger": "false"
        },
    *Doesn't seem like this is your problem

    2. In xCode make sure you select the right Scheme. By default it seems to have the CordovaLibApp scheme highlighted so when you launch the simulator it launches the default 'Hey, it's Cordova" hello world screen. Select your project scheme from the drop down which should be the same as your project name.
    Attachment 37706

    I hope that helps! PG 2.0 is so new I couldn't find anything to help me through the install process. Took some time and patience to figure this out... once i figured it out i could not believe how simple the problem was.. knuckleheadish

    There were several other hoops that you have to jump through (ala create new PG project via command line, package settings in the app.json file. sencha app build package) but it sounds like you are already keen on these steps.