PDA

View Full Version : LoadMask issue with PhoneGap and iOS 5



evilbrot
14 Nov 2011, 6:00 AM
Hello everyone,

after Upgrading to iOS 5, i encountered a really strange behavior in Sencha Touch. I don't know whether it's related to Sencha Touch or PhoneGap so i did not post it as a bug.

So this is what happens: I have a simple Panel with a text box and a button. If you enter something in a textfield and trigger the "action" event by taping on the return key i want to show a loading mask. But sometimes the transparency for the load mask seems to be broken. When i trigger the the event by taping on the button the load mask will be shown correctly.

This issue first occured under iOS 5.0, while under iOS 4.3 i had no problems with this.

If i run the app in my local web browser everything runs fine. Also when i implement the Winre debugger and highlight the mask element in the inspector in will be displayed with the desired transparency again

Also this seems to depend on the string you enter in the textfield. I found it most likely to happen if you enter a one digit number.

I know this sounds totally wired. I have no clue why this happens :(

Here is some example code to reproduce this behavior (tested with Sencha Touch 1.1.1 and PhoneGap 1.2 on iOS 5.0/5.0.1):

app.js


Ext.regApplication({
name: 'app',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (/*!device ||*/ !this.launched) {return;}

this.views.viewport = new Ext.Panel({
fullscreen: true,
items: [{
xtype: 'textfield'
}, {
xtype: 'button',
text: 'action',
handler: function() {
app.views.viewport.getComponent(0).blur();
app.views.viewport.fireEvent('action');
}
}],
listeners: {
action: function() {
this.setLoading( true );
var task = new Ext.util.DelayedTask(function(){
this.setLoading( false );
}, this);
task.delay( 1000 );
}
}
});
}
})



index.html


<!DOCTYPE html>
<html>
<head>
<title>App</title>

<meta charset="utf-8">


<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css-debug/apple.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="app/app.js"></script>

<script type="text/javascript" src="phonegap-1.2.0.js"></script>

<script type="text/javascript">
document.addEventListener("deviceready", app.mainLaunch, false);
</script>
</head>
<body>
</body>
</html>


Hope somebody can help me with this.

mitchellsimoens
18 Nov 2011, 3:49 PM
Just tried


new Ext.Panel({
fullscreen: true,
items: [{
xtype: 'textfield'
}, {
xtype: 'button',
text: 'action'
}],
listeners: {
afterrender: function() {
this.setLoading( true );
var task = new Ext.util.DelayedTask(function(){
this.setLoading( false );
}, this);
task.delay( 1000 );
}
}
});

Outside of phonegap and it works perfectly. Not sure what phonegap would be doing.

evilbrot
18 Nov 2011, 3:54 PM
Yeah that's the strange thing... Running the code in a normal web browser works fine. But with PhoneGap i get the blank screen caused by the LoadMask overlay BUT ONLY i if i trigger the action event via the return key on the keyboard.