PDA

View Full Version : phonegap orientation example and question



tkzic
25 Jan 2011, 11:48 PM
This code is an simple example of the phonegap orientation bug (iphone). If you start the program in landscape mode, everything works fine on subsequent orientation changes. If you start in portrait, then whenever you switch to landscape and touch the screen, the panel will scroll up 160 pixels up off the screen. If you touch the status bar it scrolls back into view, but is essentially unusable because it scrolls away when you touch it again. So I'm looking for a workaround and was wondering if its possible to prevent the default touch event behavior that causes this weird scrolling? Or any other suggestions. thanks!

Note: The index.html file that goes with this code is just the generic phonegap wrapper with links to sencha.js and .css



var mainPanel;

Ext.setup({ // sencha setup
onReady: function() {

var toolbar = new Ext.Toolbar({
dock: 'bottom',
items: [{
text: 'button',
handler: function() {console.log('button');}
}]
});

mainPanel = new Ext.Panel({
fullscreen: true,
dockedItems: [toolbar],
html: '<div id="stuff"> hello </div>'
});

document.addEventListener('orientationChanged', updateMainPanel);

} // end onready
})

// called by orientationChange event listener
function updateMainPanel(e) {

var w, h, currentOrientation;

// navigator.notification.alert('ump: ' + orientation );

if(e.orientation == 0) { // portrait
w = 320;
h = 460;
currentOrientation = 'portrait';
}
else { // landscape
w = 480;
h = 300;
currentOrientation = 'landscape';
}

mainPanel.setOrientation( currentOrientation, w, h ); // redraw panel

}