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.

Sencha Touch 2.x with Phonegap/Cordova 2.0

Thread Tools

Search Thread

Display

Hybrid View

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