PDA

View Full Version : 1.0 - toolbar docked to bottom too low in iOS 4.2 when compiled in PhoneGap



mherger
24 Nov 2010, 2:28 AM
If I compile a Sencha Touch app using PhoneGap for iOS, then the toolbars docked to the bottom are too low after the 4.2 update, but were ok before.

Sample code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test, test, 1, 2</title>

<link rel="stylesheet" type="text/css" href="js/sencha-touch/resources/css/sencha-touch.css" />

<script type="text/javascript" src="js/sencha-touch/sencha-touch-debug.js"> </script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{
dock: 'bottom',
xtype: 'toolbar',
items: [ { html: 'yo!' } ]
}],
items: []
});
}
});
</script>
</head>

<body></body>
</html>


Screenshot from iPad/3.2:
http://gyazo.com/cbd230d4ac64b89b4a2d387ee650d320.png

iPad/4.2:
http://gyazo.com/4a846535c7af90fe5a710815592948d9.png

As always I have no idea whether this is a Sencha bug or a PhoneGap issue. I'll ask them to check it as well.

evant
24 Nov 2010, 2:40 AM
So does the app work outside of PhoneGap? As you said, there's a number of variables here which might mean it's a bug somewhere else.

mherger
24 Nov 2010, 2:52 AM
Yes, it does work fine in Mobile Safari 4.2.

Steffen Hiller
24 Nov 2010, 6:50 AM
Two things you could try:

1. add a fullscreen panel with some content and without a toolbar and see if it's also moved down, just to check if it's just the toolbar

2. add firebug light to the button's handler and inspect the dom :) maybe that gives you ideas

mherger
24 Nov 2010, 1:52 PM
Here's a hacky workaround I've found to "fix" this issue for me: add a 20px height panel to the bottom of the main panel.


if (Ext.is.iOS && device.version.search('4.2') == 0) {
this.dockedItems.push({
xtype: 'panel',
dock: 'bottom',
height: 20,
html: 'you should not see this, really'
});
}

reg2000
25 Nov 2010, 8:11 AM
Hi there

Still not sure it's a Sencha Touch or phonegap issue. I think it might actually be a webkit browser issue.

I've built a minimal iOS app - constructing and initializing the UIWebView the same way phonegap is doing it, i.e using

CGRect screenBounds = [ [ UIScreen mainScreen ] bounds ];

to get the screen height which is 480 on an iPhone (independent of the iOS version it is running).

But I found the following height difference using alert(window.innerHeigth) in the index.html file loaded.

- Device running iOS 4.1: innerHeight is 460 (i.e. status bar height seems to be excluded)
- Device running iOS 4.2: innerHeight is 480 (i.e. status bar height seems to be included)

In both cases outerHeight is 480.

Felix

Riddler
26 Nov 2010, 7:14 AM
I'm tring me too a little app with PhoneGap and Sencha Touch but in iOS 4.2 I have the same problem ...

The bottom not apper correcly it is cut in yhe middle ...

what we can do?

--
Riddler ?

mherger
26 Nov 2010, 8:50 AM
what we can do?

Above (updated) workaround should be working fine. The first version did work in the simulator, but not the device, as the device was reporting a version of 4.2.1, and my code was only comparing 4.2 exactly. Give it another try.

Riddler
29 Nov 2010, 1:44 AM
Above (updated) workaround should be working fine. The first version did work in the simulator, but not the device, as the device was reporting a version of 4.2.1, and my code was only comparing 4.2 exactly. Give it another try.

Thanks for your workaround I've tested on my app but when a try to change orientation ... the app don't work correctly ... I loose the bottom and the weight don't resize ... but all worki fine when the iPhone is in vartical position.

this is my code




function main(){

var slider = new Ext.form.Slider({
xtype: 'slider',
name: 'distance',
label: '<div class="label">Raggio Km:</div> <div id="viewDistance">0.5</div>',
minValue: 0.5,
maxValue: 11,
increment: 0.25,
listeners: {
'change': function(slider, thumb, value){
callWS(lat,lon,slider.getValue());
Ext.get('viewDistance').update(value);
//alert('CALL WS!!!\nlat= ' + lat +'\nlon= ' + lon);
},
'drag': function(slider, thumb, value){
Ext.get('viewDistance').update(value);
}
},
style: {
width: '319px',
paddingBottom: '25px',
zIndex: '999'
}
});

//getGeoPosition();

panel = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: '<span id="#title">Ristoranti</span>'
},
{
dock : 'bottom',
xtype: 'panel',
items: [
slider
],
style: {
borderTop: 'solid 1px #C3C3C3',
paddingLeft: '0px',
width: '100%'
}
},
],

html: ''
});

if (Ext.is.iOS && device.version.search('4.2') == 0) {
this.dockedItems.push({
xtype: 'panel',
dock: 'bottom',
height: 20
});
}
// ORIENTATION
Ext.EventManager.onWindowResize(setActivePanel);
Ext.EventManager.onOrientationChange(setActivePanel);
//alert(window.innerHeight);
}



--
Riddler ?

tomalex0
29 Nov 2010, 4:01 AM
Just happened to see a post in phonegap

http://phonegap.lighthouseapp.com/projects/20116/tickets/94-different-windowinnerhight-on-ios-421.

gabrielstuff
14 Dec 2010, 11:37 AM
Hi !
I've been trying to add the 20px height panel to the bottom dockedItems with no success.

Actually trying with just :


demos.BottomTabs.dockedItems.push()

give me :

TypeError: Result of expression 'demos.BottomTabs.dockedItems.push' [undefined] is not a function.

Where exactly do you place this code ? I'll be gratefull to you if you could give us an example ?

ed.canas
14 Dec 2010, 12:38 PM
I'm using Quickconnect instead of phonegap and I don't have this issue, I had similar problems with phonegap.
For those who would like to take a look go to http://www.quickconnectfamily.org/

Here is their roadmap for comparison to phonegap http://quickconnect.pbworks.com/w/page/9183366/Porting-Roadmap

Don't let the homepage look put you off...

mherger
14 Dec 2010, 11:44 PM
demos.BottomTabs.dockedItems.push()

give me :

Where exactly do you place this code ? I'll be gratefull to you if you could give us an example ?

I'm running this inside my class' initComponent, before the initComponent.superclass is called.

If you're creating an object directly, you'll probably have to do something like



demos.BottomTabs.addDocked(...);
demos.BottomTabs.doLayout();

SunboX
7 Jan 2011, 3:50 PM
I'm using Quickconnect instead of phonegap and I don't have this issue, I had similar problems with phonegap.
For those who would like to take a look go to http://www.quickconnectfamily.org/

Here is their roadmap for comparison to phonegap http://quickconnect.pbworks.com/w/page/9183366/Porting-Roadmap

Don't let the homepage look put you off...

Yes, we can learn from them. ;o)

https://github.com/SunboX/phonegap-iphone/commit/6bdeb22434594649fe008d72a47465f2f3228251

greetings André