orientationchange

[Brendan Carroll]

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


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

[rdougan]

This code is working for me in PR4:


Ext.setup({
onReady: function() {
Ext.Viewport.on('orientationchange', function() {
console.log('orientationchange');
});
}
});

your link doesn't have ST on it.

[Brendan Carroll]

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



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

[rdougan]

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


Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
Ext.Viewport.on('orientationchange', function(viewport, orientation, width, height) {
Ext.Viewport.setHtml('orientationchange. width: ' + width + ', height: ' + height);
});
}
});

[Michou]

I'm happy for you.

But please test this :


//*************************************************************************************************
//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