PDA

View Full Version : Conflict wit sencha / phonegap & html5 database


erneso.laval
11 Jul 2010, 8:35 AM
I am building an App with sencha touch & phonegap. But when I tried to open a client side Database (great stuff in html5) my sencha user interface disappears. This just happens when I try it on the iphone (on Safari/Chrome the code works Ok at my computer).

This is a minimal code that replicates the problem:


<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="sencha/js/ext-touch-debug.js"> </script>
<script type="text/javascript" charset="utf-8">
Ext.setup({
onReady: function() {
panel = new Ext.Panel({
fullscreen: true,
html:'Test',
});

var db = openDatabase('testDB', '1,0', 'Test DB', 65536); // (1) Problem
}
});

</script>
</head>
<body> </body>
</html>


If I don't open the database (1) The html "Test" displays correctly. When I open it, it appears briefly and then disappears. If I delete the call to phonegap.js it works OK. From time to time the problem does not occur (Memory issues?).

So ... it seems that there is a conflict between sencha/phonegap/openDataBase

Any help or direction is greatly appreciated!!

==========
Update: the problem just takes place when I install the application as a native app (vía PhoneGap & Xcode) to an iphone/app (either simulator or actual device). It is does not happen when I access the app via Internet.
Aldri
12 Jul 2010, 5:11 AM
I don't know about phonegaps & sencha touch bugs, I've never tried the offline feature of phonegap for the moment, but maybe that you could try this: http://www.nils-dehl.de/2010/06/how-to-make-a-sencha-touch-app-offline-usable-with-the-html5-cache-manifest/
I'm not sure if this will work, but let me know because I will probably have to use it soon :)
felipe.alvarado
13 Jul 2010, 12:11 PM
Hello, i'm already solve it with a little trick and maybe some guy can make this better ;)


Inside my onReady function on my apps.js (main file for sencha) i put a timer that allow avoid memory conflicts between sencha and phonegap.



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'phone_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var online = navigator.onLine;

if(navigator.onLine){

setTimeout("Main.init()",2000);


}else {

navigator.notification.alert(
"Solo funcionamos si tiene conexión a internet, lo sentimos :(",
"Sin conexión a internet");


}

}
});



BTW great job with sencha it's a great framework :)
felipe.alvarado
13 Jul 2010, 2:51 PM
the problem is caused because the two framework has a memory collapse at the start on an iphone (in the simulator the memory isn't a problem ;) )

i've already solved with a trick in the "onReady" method.

put a timer with a 1000 ms



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'phone_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var online = navigator.onLine;

if(navigator.onLine){
navigator.notification.loadingStart();
setTimeout("Main.init()",500);


}else {

navigator.notification.alert(
"Solo funcionamos si tiene conexión a internet, lo sentimos :(",
"Sin conexión a internet");
}
}
});
hartti
11 Jul 2011, 7:13 PM
I am a beginner both in Sencha and PhoneGap but this tutorial gives another workaround for this issue
http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap#Instantiating_the_Application

Yes, I know you asked this last year, but I thought this could help someone else fighting this same issue :-)

Hartti