1. #1
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default orientationchange

    orientationchange


    I think this is a bug or just perhaps I'm missing something but width and height always return same values regardless of orientation.

    Sorry copied/paste incorrect. Should be as follows which are the correct args I assume. Still the height and width never update regardless of portrait or landscape on my phone.

    See for yourself with debugging enabled - http://mobile.kci.com/parking

    Using PR4 iOS 5

    Code:
    Ext.define('Sha.view.Main', {
        extend: 'Ext.Container',
        xtype: 'mainview',
        requires: ['Sha.view.MapContainer', 'Sha.view.MapSettingsContainer', 'Sha.view.MapResultsList', 'Sha.view.AboutContainer', 'Sha.view.ParkingResultsList', 'Sha.view.LotDirections'],
        config: {
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'image',
                height: 40,
                style: 'background-color:#1F1F1F',
                src: 'images/banner2.jpg'//,
                //flex: 0
            }, {
                xtype: 'tabpanel',
                activeItem: 0,
                tabBarPosition: 'bottom',
                flex: 1,
                items: [{
                    xtype: 'mapcontainer',
                    iconMask: true,
                    iconCls: 'globe2',
                    title: 'Map'
                }, {
                    xtype: 'parkingresultslist',
                    iconMask: true,
                    iconCls: 'list',
                    title: 'Parking'
                }, {
                    xtype: 'mapsettings',
                    iconMask: true,
                    iconCls: 'settings',
                    title: 'Settings'
                }, {
                    xtype: 'aboutcontainer',
                    iconMask: true,
                    iconCls: 'info',
                    title: 'Services'
                }, {
                    xtype: 'lotdirections',
                    iconMask: true,
                    iconCls: 'compass3',
                    title: 'Directions'
                }]
            }]
        },
    
        initialize: function () {
            //console.log('initialize viewport');
            this.callParent(arguments);
            Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, { buffer: 50});
        },
    
        handleOrientationChange: function (t, o, w, h) {       
                console.log('calling layout');
                console.log(w);
                console.log(h);
                console.log('done call');
        }
    });
    -BC ...

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    This code is working for me in PR4:

    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.on('orientationchange', function() {
                console.log('orientationchange');
            });
        }
    });
    your link doesn't have ST on it.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default


    Yes the event is being thrown correctly it's just that the height and width never change. I've also tried to use t.getWidth() within the listener but that always returns 100% whereas t.getHeight() returnd and integer. One would think height and width would change with orientation.

    The url should be
    http://mobile.kci.com/parking/site.html

    Code:
    initialize: function () {
            //console.log('initialize viewport');
            this.callParent(arguments);
            Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, { buffer: 50});
        },
    
        handleOrientationChange: function (t, o, w, h) {       
                console.log('calling layout');
                console.log(w); //t.getWidth(); 
                console.log(h); //t.getHeight();  
                console.log('done call');
        }
    -BC ...

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    This works fine for me on a iPhone 4GS running the latest iOS:

    Code:
    Ext.setup({
        viewport: {
            autoMaximize: false
        },
        onReady: function() {
            Ext.Viewport.on('orientationchange', function(viewport, orientation, width, height) {
                Ext.Viewport.setHtml('orientationchange. width: ' + width + ', height: ' + height);
            });
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Posts
    51
    Vote Rating
    0
    Michou is on a distinguished road

      0  

    Default


    I'm happy for you.

    But please test this :
    Code:
    //*************************************************************************************************
    //view/main
      
      Ext.define('mtApp.view.Main', {
            extend  : 'Ext.Container',
            xtype   : 'mainview',
            config  : {
                fullscreen: true,
                layout    : 'fit',
                html      : 'test'
            }
      });
    
    //*************************************************************************************************
    //controller/main
      
      Ext.define('mtApp.controller.Main', {
        extend: 'Ext.app.Controller',
        
        config: {
            profile: Ext.os.deviceType.toLowerCase(),
            refs   : {
                main: {
                    selector  : 'mainview',
                    xtype     : 'mainview',
                    autoCreate: true
                }
            }
        },
            
        init: function() {
            Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, { buffer: 50 });
        },
        
        handleOrientationChange: function (t, o, w, h) {
            // not working
            this.getMain().setHtml('orientationchange('+o+') width: ' + w + ', height: ' + h);
            // working
            console.log(Ext.Viewport.getOrientation(),Ext.Viewport.getSize().width,Ext.Viewport.getSize().height);
        },
        
        updateProfile: function(profile) {
            this.getMain();
        }
        
      });
      
    //*************************************************************************************************
      Ext.application({
        
        name               : 'mtApp',
        
        views              : ['Main'],
        controllers        : ['Main']
        
      });
    and in my test :
    o returns the width
    w & h the height

Thread Participants: 2