1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    oonox is on a distinguished road

      0  

    Default Sencha + Phonegap orientation problem

    Sencha + Phonegap orientation problem


    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

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    CodeAmigo is on a distinguished road

      0  

    Default


    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!

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    oonox is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User arlo.carreon's Avatar
    Join Date
    Jul 2010
    Location
    Orlando, TX
    Posts
    34
    Vote Rating
    0
    arlo.carreon is on a distinguished road

      0  

    Default


    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:

    Code:
    <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
    Code:
    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.

  5. #5
    Sencha User arlo.carreon's Avatar
    Join Date
    Jul 2010
    Location
    Orlando, TX
    Posts
    34
    Vote Rating
    0
    arlo.carreon is on a distinguished road

      0  

    Thumbs up


    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.

    Code:
    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.

  6. #6
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    oonox is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    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...

    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();
    }
    };
    do you have any suggestion to fix this problem or a different solution?
    thanks in advance for any help.
    Luca

  8. #8
    Sencha User arlo.carreon's Avatar
    Join Date
    Jul 2010
    Location
    Orlando, TX
    Posts
    34
    Vote Rating
    0
    arlo.carreon is on a distinguished road

      0  

    Default


    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.

    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();
       }
    };

  9. #9
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    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...

  10. #10
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    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.
    Code:
    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);
    	}
    };

Similar Threads

  1. Conflict wit sencha / phonegap & html5 database
    By erneso.laval in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 11 Jul 2011, 7:13 PM
  2. Preventing orientation changes?
    By SuperTron in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 19 Jul 2010, 11:20 AM
  3. sencha touch list store problem
    By reminder in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 27 Jun 2010, 11:33 AM
  4. Tab Orientation
    By garyrgi in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 7 Nov 2006, 9:49 AM

Thread Participants: 19

Tags for this Thread