PDA

View Full Version : Ext.Loader.setConfig paths seems to work in phonegap ios but not phonegap android?



mike lebowski
11 Dec 2011, 9:33 PM
In my app.js I have this:


Ext.Loader.setConfig({ enabled: true,
paths: {
'Ext.ux.touch.grid': './lib/Ext.ux.touch.grid'
}
});


Ext.require([
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.HeaderMenu',
'Ext.ux.touch.grid.feature.Sorter'
]);

And in my app, I have
www/app.js
www/lib/touch/sencha*.js
www/lib/Ext.ux.touch.grid/*

When I ran this in the browser it was fine.
Now I am trying to run the app in Phonegap. I made the prescribed phonegap adjustments. After working past one bug in ios that needed a patch applied (even for sp3 ??) , I get it running in ios simulator (with some caveats), but in the android simulator, I get only white screen and in log I see that it cannot find the required js files:

12-11 21:14:14.588: E/Web Console(529): Uncaught Error: [Ext.Loader] Failed loading './lib/Ext.ux.touch.grid/View.js', please verify that the file exists at file:///android_asset/www/lib/touch/sencha-touch-all-debug-w-comments.js:7785

Now, remember, this works fine in ios simulator. So is there just a bug in android or am I using a relative path that is ok for ios but not ok for android? Or other problem?

And, yes, I have verified that the files are in the expected location in the apk file.

mike lebowski
11 Dec 2011, 9:46 PM
also, note that i have app.js in the www folder. This IS an MVC app, and I notice that some people are putting the app.js in the app folder (e.g. www/app/app.js ) in new MVC samples.
I doubt my app.js location is affecting the resolution of the setConfig paths , but you never know.
Fwiw, is the movement to put app.js in apps folder in touch 2.0 MVC apps just a stylistic recommendation?

rdougan
11 Dec 2011, 11:56 PM
I'm not sure what is going on without some debugging, which I cannot do right now. I'm not even sure if it will work, because of the way Android is.

However, you really should not use the loader on device, as there is a huge performance penalty.

I actually just wrote a blog post on how to package your ST2 MVC application the other day: http://robertdougan.com/posts/packaging-your-sencha-touch-2-application-using-the-sencha-sdk-tools

mike lebowski
12 Dec 2011, 9:47 PM
I have no vested interest in using Ext.Loader. This is my first sencha app and I was just following what I thought was best practice as seen in various samples. I am perfectly open to alternatives, but I am not sure what the alternative is. Looking at your referenced blog, is it this approach you recommend?


{
"name": "Application - Production", "target": "app-all.js", "compress": true, "files": [ { "path": "lib/touch2/", "name": "sencha-touch-debug.js" }, {

where I should add the other "required" files to the that files array?

rdougan
13 Dec 2011, 9:48 AM
If you are using MVC, then all of your application files should be automatically included into that file.

mike lebowski
13 Dec 2011, 11:40 AM
hmm, that section is about the packaging of files for production using the jsb3 utility. That is all fine, and I intend to do that when i am ready for production, but I am no where near ready for production. So in mean time I need to figure out a way to include these library files that works on both ios and android.

rdougan
13 Dec 2011, 11:41 AM
Can't you just manually add them into the index.html file like you normally would?

mike lebowski
13 Dec 2011, 3:50 PM
I will try. Like i said, I was following sample code that I found. I honestly do not know why the sample did not just do what you are recommending.

Surykat
14 Dec 2011, 2:20 AM
I have the same problem ;/ and I'm running out of ideas to reduce that...

Everythings works fine until I have updated my Android version at my tablet. It fails in loading first file by the Ext.Loader (in my case it's Main.js controller). I tried to change paths and other properties without result..

In browser everything is loading perfectly, but during Android packaging I see same error like You. I read somewhere about not using Ext.Loader at device in production mode.. but I'm developing right now and I want to test my app at device.

Any help appreciated.

conrad.decker
19 Dec 2011, 9:20 AM
I'm seeing the same issue. Seems odd that it's not picking up those files.

All of my debugging seems to be pointing me to the fact that those files are being referenced correctly, but just failing to load. I can't find any reference to this anywhere else though so I'm wondering if it's something specific to the way we've got the individual pieces set up. I've tried moving everything around to different locations but still no luck.

mike lebowski
19 Dec 2011, 9:49 AM
I have also tried moving things around, using explicit script file includes instead of the Ext. Loader path option. Actually, when I moved away from the Ext.Loader path option in favor of explicit script file includes, my IOS version stopped working completely. So now I am back to the original state, IOS working and Android not working. I have spent a lot more time on this than would be expected unfortunately. Seems like others have this problem.

rdougan
19 Dec 2011, 10:59 AM
I have added a ticket to look into this issue on Android, however, it is highly likely that it is an Android/PhoneGap specific issue.

Until then, you can just compress your application using our SDK Tools (so there is only 1 file to load) then Ext.Loader will not be used: http://robertdougan.com/posts/packaging-your-sencha-touch-2-application-using-the-sencha-sdk-tools

Surykat
19 Dec 2011, 11:13 AM
I have done everything like it is in phonegap specification, but it's still not working. I'm doing my best to find a MAC to build my app in SDK Tools, because for example - KitchenSink app build run perfectly on my device.

But not that is a problem. Everything was working fine for me, until I have done an Android update to 3.2. It is strange for me.

conrad.decker
19 Dec 2011, 4:00 PM
Just wanted to follow up on this as I was eventually able to get my app to work with Phone Gap on Android. Rather then utilizing Ext.Loader I linked all of my necessary JS files directly in the head of index.html. It's not pretty, and it's kind of annoying but it did end up working and giving me something to play with from a testing perspective.

Per Robert's previous comments, it sounds like this isn't ideal for production applications but it does indeed seem to work for testing both on a device and via an emulator.

If I could figure out where on earth PhoneGap/Callback/whatever it's called now is tracking issues I'd open one up, but I'm not sure where the active issue tracker is. It does seem to be some sort of issue with PhoneGap and injecting JS files on the fly however. Hopefully this helps someone who may be having similar issues.

mike lebowski
19 Dec 2011, 4:51 PM
conrad, did you have to do anything else beside changing over to direct script includes in the html head? I tried doing just that and then my IOS version stopped working. I assumed it was because I have my project set up to use the MVC pattern , and that somehow the MVC pattern was dependent on the ext.Loader approach. That was just speculation on my part.

Is your project MVC by any chance?

rdougan
19 Dec 2011, 5:12 PM
You'll need to make sure they are in the correct order in your index.html, other than that, it should just work.

Models, stores, views, controllers, app.js.

conrad.decker
20 Dec 2011, 6:22 AM
My project does actually follow the MVC pattern and utilizes Ext.Loader.

No, just linking to those documents in the head of index.html got it working for me on Android.

I actually ended up using a copy of the code for Android as to not mess with the iOS build so I couldn't tell you if the same structure would work for iOS. However, I would imagine it should...it's not doing anything fancy.

That said, definitely make sure you link to ALL of the JS files that you use and as Robert mention the load order may actually play into your success. Are you getting any error messages in your logs? Have you tried loading the same code base in your webbrowser?

wprater
7 Feb 2012, 10:15 AM
We are having the same issue. And since we're loading all the js files locally, there should be no real need to create a build while testing.

We're going to create a build not, so the loader just loads our classes synchronously in the html head, but it would be nice to know what's happening here and if it's a PhoneGap bug.. or Android/Sencha bug.

crabjuice
23 Mar 2012, 6:21 AM
took me a while to figure it out. and now, I feel the need to share:

android 4 does not like requests to local files with query strings (?) or fragments (#). sencha usually appends a query string parameter with the current timestamp to avoid caching. to disable this behavior, do this in your Ext.Loader config:


Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});