PhoneGap Build produces broken app after upgrading from ST 2.0.1 to ST 2.1.

**ing.alberto** · 3 Dec 2012 8:23 AM

Try to require every ST element that you use in your app.
* Note that the requires must be out of the "launch" function.

Code:

Ext.application({ 
    name:'MyApp', 
    models:['User','Group'], 
    stores:['Users'],
    controllers:['Users'],
    views:['Main','ShowUser'], 
    requires: [
        'MyApp.view.LogoImage',
        'MyApp.view.LinkButton',
        'Ext.form.Panel',
        'Ext.field.Text',
        'Ext.field.Password',
        'Ext.Button',
        'Ext.Img',
        'Ext.Label'
    ], 
    launch:function(){Ext.create('MyApp.view.Main');}
});

Code:

Cheers!

**abbysingh** · 3 Dec 2012 11:17 PM

I managed to get it running by adding the corresponding requires to each of my 'views'.
A way for me to debug this was that I added each view in the app.js one by one. If the app ran, then that meant my view was okay. Then I added another view. If the app didn't boot up, I would check the view and add the require for whichever component I was using in it.

Hope this helps

**koala2012** · 4 Dec 2012 10:58 PM

I met the same issue, but Sencha Dev didn't get out answser? it seems that a waiting game. hope somebody give out the solution. thanks

**koala2012** · 5 Dec 2012 12:29 AM

I can provide more information that

ST2.1 + cordova 2.2 can work on android simulator 4.0.1

but ST2.1 + cordova 2.2 it Can Not work on android real device 4.0.1.met the blank screen. why? what's the difference?

**mitchellsimoens** · 5 Dec 2012 4:36 AM

For ST 2.1.1, we are looking at stripping out the Ext.device.* classes from the all builds

**koala2012** · 5 Dec 2012 6:59 AM

I'd like to know that when will the ST2.1.1 release? and will fixed this problem?

**osnem2** · 8 Dec 2012 12:33 AM

Thanks to mhousser's file "sencha-touch-all.js" and riyaad "index.html" indications now white screen was removed and my apps are working. Just waiting for the official sencha team fix.

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>App Name</title>

 <!--  <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script> -->

    <!-- add resources -->
    <link href="resources/css/app.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

**koala2012** · 13 Dec 2012 9:21 PM

Originally Posted by osnem2

Thanks to mhousser's file "sencha-touch-all.js" and riyaad "index.html" indications now white screen was removed and my apps are working. Just waiting for the official sencha team fix.

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>App Name</title>

 <!--  <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script> -->

    <!-- add resources -->
    <link href="resources/css/app.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Once you have update the index.html and how do you package your code to native? used sencha CMD to generate native app?
actually I have used your solution to use sencha CMD generate native code successfully, the native app can run on andriod 4.0.3 simulator.but Can NOT run on 4.03 real device. it's white screen as well. how do you think that?

**osnem2** · 13 Dec 2012 11:59 PM

Originally Posted by koala2012

Once you have update the index.html and how do you package your code to native? used sencha CMD to generate native app?
actually I have used your solution to use sencha CMD generate native code successfully, the native app can run on andriod 4.0.3 simulator.but Can NOT run on 4.03 real device. it's white screen as well. how do you think that?

Hi @koala2012,

for Android my recipe is:

1. Use mhousser's file "sencha-touch-all.js" and riyaad "index.html" indications.
2. My "app.json" looks like

Code:

...
    "js": [
        {
            //"path": "touch/sencha-touch.js"
            "path": "touch/sencha-touch-all.js"
        },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
            //"update": "delta"
        "update": "full"
        }
...
    ],

3. execute "sencha app build production"
4. then copy the files from "build/APP_NAME/production/*" to my "PHONEGAP_PROJEC/android/assets/www/"
5. cd "PHONEGAP_PROJECT/android/"
6. execute "ant release"
7. cd "PHONEGAP_PROJECT/android/bin"
8. jarsigner -verbose -keystore PATH_TO_KEY_STORE -signedjar APP_NAME.apk "APP_NAME-unsigned.apk" KEY_STORE
9. zipalign -v 4 APP_NAME.apk APP_NAME-aligned.apk
10. open andriod 4.0.3 simulator
11. adb install -r APP_NAME_aligned.apk ( now white screen was removed and app is OK in sumulator )
12. Install the app to my GT-I9100 with Android 4.0.3 ( now white screen was removed and app is OK in real device)

To build for Apple Store just:

1. Open with Xcode the phonegap project, just "add files to project" and load folder "build/APP_NAME/production", rename the folder from "production" to "www"
2. Execute run, the iphone simulator is opened, now white screen was removed and app is OK.

Hope this helps

**guile291912** · 5 Jan 2013 10:20 AM

Thanks again for the thead, it FINALLY works, I went crazy for a day.

So to summarize very quick :

Download the modified "sencha_touch_all" file from mhousser message put it in the 'touch' directory of your app, it will override the existing one ( you may want to save it)

Modify your index.html to get rid of the microloader code like riyaad and osmen2 found out :

Code:

<!DOCTYPE HTML><html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>App Name</title>


 <!--  <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script> -->


    <!-- add resources -->
    <link href="resources/css/app.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Modify your app.json like osmen2 said to make sure it uses the sencha-touch-all.js, because by default it uses the sencha-touch.js

Code:

...    "js": [
       {            "path": "cordova-2.2.0.js"
        },
        {
            //"path": "touch/sencha-touch.js"
            "path": "touch/sencha-touch-all.js"
        },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
            //"update": "delta"
        "update": "full"
        }
...
    ],

Build you app with "sencha app build production" or "sencha app build package"
Copy the files from "build/APP_NAME/production/*" to my "PHONEGAP_PROJEC/android/assets/www/"
Refresh your www folder in your eclipse project and it should run !

Thanks all for your help, I really think Sencha Touch team should have some test done in PhoneGap before realeasing anything ^^.

PhoneGap Build produces broken app after upgrading from ST 2.0.1 to ST 2.1.

Thread Tools

Search Thread

Display

Thanks !

Thanks !

Tags for this Thread