Sencha + Phonegap orientation problem

[gabrielstuff]

Hello !

I was wondering if anyone of you have tried to use the video example of Sencha with PhoneGap ? How to relay the event, so that the video will change on orientation but not the app ???

Thank

[anothermarcus]

This solution is great!

When I start the application in Portrait for example and rotate to landscape, everything shuffles into place.

Unfortunately, for my case, I'm using a map as an item,along with a number of buttons I want to "swipe". I find as soon as I touch the map, the entire Panel shifts up beyond the bounds of the screen. When I rotate back into Portrait, everything is fine again.

Here is how my example is laid out:

                                            toolbar = new Ext.Toolbar({
                                                          dock: 'top',
                                                          xtype: 'toolbar',
                                                          ui : 'light',
                                                          scroll: 'horizontal',
                                                          bodyStyle:'overflow-x:hidden',
                                                          defaults: {
                                                          iconMask: true
                                                          },
                                                          items : [
                                                                   myButtonGroup
                                                                   ]
                                                          });

                                              mapdemo = new Ext.Map({
                                                      
                                                      mapOptions : {
                                                      center : new google.maps.LatLng(49.25,-123.133333),  //The couver
                                                      zoom : 12,
                                                      mapTypeId : google.maps.MapTypeId.ROADMAP,
                                                      navigationControl: true,
                                                      navigationControlOptions: {
                                                      style: google.maps.NavigationControlStyle.DEFAULT
                                                      }
                                                      }

                                                   new Ext.Panel({
                                                          fullscreen: true,
                                                          layout: {
                                                          type: 'fit'
                                                          },
                                                          dockedItems: [toolbar],
                                                          items: [mapdemo]                                                          
                                                          });

Integrating a map using a simple DIV with phonegap alone, I can rotate portrait landscape, without any problems.

If there is a robust solution or a fix that Sencha or PhoneGap is putting out for this, I'd be glad to hear about it


Thanks a lot!
-Mark

[ed.canas]

Here is my solution on the orientation problem with phonegap. I stop using it and instead using quickconnect which does not have the problem with orientation
Here is a video on it
http://www.sencha.com/forum/showthre...g-QuickConnect

[anothermarcus]

Thanks Ed. I was hoping to work through my Phonegap issues, but I'll definitely give Quick Connect a try!

[tkzic]

I'm having the exact same issue when going from portrait to landscape. Have tried way to many things to no avail.

However, If I start the app in landscape, everything is fine & I can resize panels, etc on orientation changes. The best I can guess is that 'some screen dimension' for window height stays set at 480 when orientation goes from portrait to landscape - so the panel gets placed in the top 2/3 of that and scrolls as soon as you tap the screen.

Have tried setting scrollable to false, resetting panel size and origin, trapping tap events, .etc.,

On the simulator I can get it to work fine by destroying the panel on orientation change, and then recreating it 0.5 seconds after orientation change. But not on the device. I'd be thrilled to hear of a workaround.

tz

[hitman01]

This is what i use.

// Somewhere on top
var nativeAppOrientation = Ext.getOrientation();

if(Ext.is.iOS && navigator.userAgent.match(/safari/i) == null) {
Ext.EventManager.onWindowResize(function(){
if(nativeAppOrientation != Ext.getOrientation()) {
var e = document.createEvent('Events');
e.initEvent('orientationchange', true, false);
document.dispatchEvent(e);
nativeAppOrientation = Ext.getOrientation();
}
}, this, {buffer: 500});
}

[tkzic]

That's very cool code hitman01 - thanks for teaching me how to create new events in js!

It doesn't solve the problem that anothermarcus posted - that is, if your app starts in portrait mode (with sencha/phonegap) and then reorients to landscape, even if you respond to the orientationChange event and use panel.setOrientation() to make things look right... as soon as you tap the screen anywhere other than the status bar, it will scroll up by about 160 pixels - as if the viewport is still in portrait height.

this behavior doesn't happen if you start the app in landscape mode - which you can do in phonegap on the simulator, but not on the device, because the user can defeat it while the app is loading by just turning the device... arggghhhh.

Actually does anyone know a way to lock the device in landscape mode until after the app is done loading? this would be a workaround.

[tkzic]

actually I meant: scroll "down" by about 160 pixels, when you tap the screen, leaving the top of your panel up out of sight until you tap the status bar to bring it back...

[hitman01]

Sorry man, didnt read the whole thing

[sikander singh]

i was facing this problem and it really irritated me . Now i got the solution .cheers .thanks