Sencha Touch 2.x with Phonegap/Cordova 2.0

**in4p** · 26 Jul 2012 11:46 AM

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);
    },

bhaidaya

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.

**jay@moduscreate.com** · 30 Jul 2012 5:03 AM

I'm interested to see if this works. To be honest, I've been working in 1.9.0 and will soon migrate to 2.0.

**in4p** · 30 Jul 2012 5:36 AM

Please let me know if you have any success!

**jweber** · 30 Jul 2012 3:18 PM

Sencha Touch handles the "deviceready" event when it detects that you're running PhoneGap or Cordova (see core/Ext-more.js and env/Browser.js). So you can just use Ext.application like in a normal Sencha Touch app.

**in4p** · 31 Jul 2012 6:48 AM

@jweber: thanks for the suggestion. The issue unfortunately is not with the 'deviceready' event (although the check that I include in the code is to account for the race condition whereby both Sencha and Phonegap need to be ready to start loading the ui components).

The issue is that for some reason, the graphical components aren't showing up per the line:

Code:

Ext.Viewport.add(Ext.create('AppName.view.ViewName'));

All the console debug statements are printed (so I know that the launch functions are being run), but the graphical portion of the app isn't added to the viewport in Phonegap. The same code works in Phonegap pre 2.0, and works as is in a web browser.

Greatly appreciative of any additional thoughts or suggestions!

**bhaidaya** · 2 Aug 2012 11:00 AM

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.
xcode screen.jpg

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.

**in4p** · 7 Aug 2012 1:03 PM

thanks @bhaidaya

**bhaidaya** · 17 Aug 2012 9:18 AM

I think there are still some inherent issues with st2 and pg2. were you successful in porting your app to 2.0?

I am rolling back to PG 1.9 for now.

**in4p** · 17 Aug 2012 9:24 AM

We were successful in getting a proof of concept of ST2 working with PG2, but we have yet to fully test it end-to-end.
Any chance you want to share some of the issues you have encountered?

**bhaidaya** · 6 Sep 2012 10:48 PM

Hmm, it's been a little bit since I did my test but if I remember correctly I was unable to make any jsonp requests.

I added * to the domains whitelist etc and still had no luck. Putting the same code into 1.9 worked so I know it wasn't my code that was the problem, however it is possible that i may have missed something in regards to setup that made this break? dunno.

Were you able to deploy using st2 and pg2?

Sencha Touch 2.x with Phonegap/Cordova 2.0

Thread Tools

Search Thread

Display

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

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

Success!

Success!

Tags for this Thread