1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      1  

    Default Unanswered: Android viewport orientation resize troubles

    Unanswered: Android viewport orientation resize troubles


    Code:
    Sencha touch 2.0
    PhoneGap 1.4.1
    I'm having trouble with the Viewports resizing, below is the workflow of my app.
    The figures are below the code.

    Does anyone have a solution? I've already tried suspending the viewport's events before the plugin is called, and resuming them after. Same behaviour!

    1. I enter a view with a actionsheet. In this actionsheet I select "Take Photo". (figure 1)
    2. I make a photo using my CUSTOM made phonegap plugin to take a picture.
    Important : this view forces landscape orientation! (figure 2)
    3. After taking a picture, the callback to the app sends the image base64 string. (figure 1 again)
    4. When I turn my phone sideways, everything looks fine (figure 3)
    5. When I turn my phone in portrait mode the viewport's height is wrong! And the body's background is displayed partially.(figure 4)

    Logcat error :
    Code:
    04-06 12:27:41.582: E/Web Console(8202): Uncaught Error: [ERROR][Ext.viewport.Android#undefined] Timeout waiting for viewport's outerHeight to change before firing orientationchange at file:///android_asset/www/sencha-touch-all-debug-rc2.js:25926
    figures:
    device-2012-04-06-122818.jpgdevice-2012-04-06-122828.jpgdevice-2012-04-06-122838.jpgdevice-2012-04-06-122848.jpg

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    From the looks of it, it looks like PhoneGap isn't telling Sencha Touch that the orientation has changed.

    Every 50ms it checks to see when the windowOuterHeight has changed. If it hasn't happened for 2 seconds (40 checks) then it will stop and throw that error.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    39
    Answers
    3
    Vote Rating
    1
    Derroy is on a distinguished road

      0  

    Default


    ok, sounds confusing :P. I'm forcing the orientation via the layout XML for that activity!
    How am i supposed to tackle this problem? Programmatically force the layout (requestOrientation)?

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    38
    Vote Rating
    0
    zehavibarak is on a distinguished road

      0  

    Default Try

    Try


    setTimeout(function () {
    Ext.Viewport.setHeight('100%');
    }, 750);

  5. #5
    Touch Premium Member Philip Murphy's Avatar
    Join Date
    Oct 2011
    Location
    Dublin, Ireland
    Posts
    27
    Vote Rating
    2
    Philip Murphy is on a distinguished road

      1  

    Default


    zehavibarak - great solution - thanks. I reduced the timeout a little and it works very well on my Samsung Galaxy SIII - very smooth.

    Code:
        initialize: function () {
            Ext.Viewport.on('orientationchange', 'test', this, {buffer: 50});
            ...
        },
    
    
       test: function() {
            setTimeout(function () {
                Ext.Viewport.setHeight('100%');
                }, 50);
        },