Sencha + Phonegap orientation problem

[oonox]

Hi,

For sencha team thank you for this beautiful tools ! Sencha is the best way for webapp !

So my problem. My web app work perfectily and whan i change the orientation, no problem.

But when i embed my webapp via phone gap the orientation change keep the initial position.

I found this solution then i use with a onOrientationChange of panel :

http://stackoverflow.com/questions/2...scape-portrait

but doesn't work ! any pist or way where i can find a solution ?

Thx

Fabien

[CodeAmigo]

I am having the same problem. I am using the Kitchen Sink demo and PhoneGap. The orientation adjustment happens in the browser fine but when you run it on an iPad or the simulator with PhoneGap, the onOrientationChange function/listener does not seem to work, except on first load. Please help!

[oonox]

so the phonegap don't send the onorientationchange event and use the orientationchanged event init by the phonegap.js.

But phonegap.js gave error with sencha.

i found this solution : http://groups.google.com/group/phone...438ccb9111c2ca

if i have more information i post the solution here.

see you.

Fabien

[arlo.carreon]

Hey Fabien,

I have been following your threads since yesterday. I am also trying to launch an iPad app into the app store and my final step is getting the orientation to change on the ipad with Sencha and PhoneGap.

So far, this is the only thing that has worked for me:

<script>
       document.addEventListener("orientationChanged", yourCallbackFunction, false);
</script>

I added that line to the index.html file and I created a function in my sencha file for the callback.

Sencha app.js

function yourCallbackFunction()
{
     //alert("PhoneGap has triggered the event!");
   
     // Now I need to have Sencha refresh the Panel?
}

So, basically now I am trying to get Sencha to "refresh" or stretch out on the screen like when it first starts. I have tried doLayout(), but that did not work.

If you have some luck with this let me know.

[arlo.carreon]

Fabien,

I finally got this to work. I had the same problem you were having with PhoneGap and Sencha. Apparently Sencha, does recognize the WindowResize event so I used that event to manually resize my main Panel.

new Ext.setup({
    glossOnIcon: false,
    onReady: 
    function() 
    {  
       // Regular EXT JS application code here
       // ......

        // Setup a callback for WindowResize Event
        Ext.EventManager.onWindowResize( senchaChangeOrientation );
    } 
});

// Callback
function senchaChangeOrientation()
{
    if(Ext.getOrientation()=="landscape")
    {
        mainPanel.setSize(1024,748);
        mainPanel.doLayout();
    }else
    {
        mainPanel.setSize(768,1004);
        mainPanel.doLayout();
    }
    
}

Keep in mind that in the above code, my main panel is the variable name "mainPanel". This worked like a charm.

[oonox]

Many thanks for your answers ! i test these solution and it work fine !

[lteti77]

hi, i'm a newbie sencha user so probably my question is very "dummy"...
i have a similar problem using sencha-phonegap.


my application should display 2 different view:

• in portrait, i want a long test with scrolling enabled
• in landscape, i need to display an image that fits the screen bounds with no scrolling at all

rotating the device the app should switch between the views.
I created an html with 2 'divs' containing the 2 views: they are included in a container 'div' called my-div and are made visible/invisible using css media queries.
then i created a fullscreen panel with the content of my-div and tried to catch window resize event in order to set the panel size as in the example above. but it didn't worked...

When i'm in portrait and scroll to bottom and then i rotate to landscape, the scrolling is still active and the image is not visible because is on the top and i have to scroll to view it...

new Ext.setup({
onReady: 
function(){ 
mainPanel = new Ext.Panel {
contentEl: 'my-div',
scroll: 'vertical',
fullscreen: true
// Setup a callback for WindowResize Event
Ext.EventManager.onWindowResize( senchaChangeOrientation );
} 
});
 
// Callback
function senchaChangeOrientation()
{
if(Ext.getOrientation()=="landscape")
{
mainPanel.setSize(480,320);
mainPanel.setScrollable('false');
mainPanel.doLayout();
}
else {
mainPanel.setSize(320,480);
mainPanel.setScrollable('vertical');
mainPanel.doLayout();
}
};

do you have any suggestion to fix this problem or a different solution?
thanks in advance for any help.
Luca

[arlo.carreon]

Although this is not the fix you are looking for, I have suggested some syntax correction from the code you provided. I believe the callback was not working before, because of where you had that line of code.

new Ext.setup({
onReady: 
   function(){ 
      mainPanel = new Ext.Panel({
      contentEl: 'my-div',
      scroll: 'vertical',
      fullscreen: true
   });

   // Setup a callback for WindowResize Event
   Ext.EventManager.onWindowResize( senchaChangeOrientation );
});
 
// Callback
function senchaChangeOrientation()
{
  if(Ext.getOrientation()=="landscape")
   {
       mainPanel.setSize(480,320);
       mainPanel.setScrollable('false');
       mainPanel.doLayout();
   }
   else {
      mainPanel.setSize(320,480);
      mainPanel.setScrollable('vertical');
      mainPanel.doLayout();
   }
};

[lteti77]

yes. it was a typing error...there is also a missing curly bracket after the line:

Ext.EventManager.onWindowResize( senchaChangeOrientation );

by the way, the event is catched by senchaChangeOrientation function (i tried to display an alert and worked...) but after few seconds the application crashes...

[lteti77]

finally i got it to work!
it was simpler than i believed...simply declared 2 panel with a card layout and set active item on window resize
here's the code i used.

Ext.setup({
    onReady: function() {
           panel = new Ext.Panel({
		fullscreen: true,
		layout: 'card',
		items:[{xtype:'panel',contentEl:'portrait-container',scroll:'vertical'},
			   {xtype:'panel',contentEl:'landscape-container',scroll:'false'}]
		});		  
		 Ext.EventManager.onWindowResize(setActivePanel);
	}	  
});

function setActivePanel(){
	if (Ext.getOrientation()=="landscape") {
		panel.getLayout().setActiveItem(1);

	} else {
		panel.getLayout().setActiveItem(0);
	}
};