Sencha touch app remains on blue loading screen when viewing on Android device or emulator

Question

I just created a basic sencha app by

sencha generate app --name AndroidDemo --path ../demo

and I viewed it in browser and everything is perfect. I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/

and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.

I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.

I'm completely clueless. Need your help friends.

Thanks,

Answer 1

In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.

Answer 2

i'm having the exact same problem.. (currently on windows, btw)

while it's not exactly a solution, a workaround that i did (out of desperation to see the rest of my app on the emulator): is to just install it directly to the emulator using the "adb" command.

haven't tried this on a mac, but i'm guessing it's almost the same thing?

1. after building the app using "sencha" cmd, open cmd/terminal to the build directory. -assuming you did not change the output location, the apk will be created in your project root folder under this folder:
   "build\native-package-mobile\MYAPPNAME\packager.json\"

2. make sure the emulator is already running

3. run the following in command/terminal at the folder where the apk is located:

adb install -r MYAPPNAME.apk

1. wait for awhile and it should say successfully installed. run the app in the emulator and hopefully it will go beyond the loading screen.

I don't know why this issue is happening though. (only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)

please share if you find the correct fix for this :)

Answer 3

This usually happens when you build your version and you did not imbed all needed components.

For example, when you use ...

Ext.Image

... in your code.

While running without ...

Sencha app build xxx

... Sencha will grab the component from the touch/src components folder.

But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.

Please open the console and look out for a warning like this:

[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the 
corresponding class

You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).

Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).

There is one other thing that might happen. It’s the scope of async operations. Like this:

 Ext.defer(function() {this.log(‘all good’);}, 500);

this is not the scope of your class. You need to use:

Ext.defer(function() {this.log(‘all good’);}, 500, this);

Or you might even use ...

Ext.bind()

...to bind the scope to the function.