How to handle Orientation Change in Sencha Touch V2 - sencha-touch-2

Question

I've got a Panel that needs to execute some Javascript if the orientation changes. How do I handle the Orientation Change in sencha-touch-2?
This is basically the key line I'm trying to get to work
this.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
Here's the context.
Ext.define('rpc.view.home.indexView', {
extend: 'Ext.Panel',
alias: 'widget.home-indexView',
config: {
scrollable: true,
items: [{
xtype: 'toolbar',
title: 'RockPointe Mobile',
docked: 'top'
}, {
xtype: 'panel',
items: [{
xtype: 'panel',
style:'border:1px solid #c4c4c4 !important; border-left:none;border-right:none;',
items: [{
html: '<div style="width:100%; height:150px;"><ol id="AN-sObj-parentOl"><li id="AN-sObj-scene-0"><div class="AN-sObj-stage" id="ext-gen5089"><div class="AN-Object" id="AN-sObj-60"><div id="AN-sObj-val-60"><img src="img/banner-3.jpg" /></div></div><div id="AN-sObj-61"><span>Relentlessly Focused On The Lost</span></div><div id="AN-sObj-62"><span>Passionately Devoted To God</span></div><div id="AN-sObj-63"><span>Deeply Committed To One Another</span></div></div></li></div>'
}]
}, {
xtype: 'container',
layout: {
type: 'hbox',
pack: 'center'
},
defaults: {
xtype: 'button',
ui: 'plain',
style: 'margin-top: 5px;',
pressedCls: 'x-button-rpc-pressed'
},
items: [{
text: 'Videos',
cls: 'x-button-rpc',
flex: 1
}, {
xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Calendar',
cls: 'x-button-rpc',
flex: 1
}, {xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Sites',
cls: 'x-button-rpc',
flex: 1
}]
}, {
xtype: 'panel',
cls: 'x-panel-rpc',
items: [{
html: 'body content'
}]
}, {
xtype: 'panel',
items: [{
html: '<div style="text-align: right; width:100%; padding-right: 5px;"><img src="/img/facebook.png" /><img src="/img/twitter.png" /></div>'
}]
}]
}]
},
initialize: function () {
console.log('rpc.view.home.indexView ~ initialize');
this.on('painted', 'handlePainted', this, { buffer : 50 });
// HOW TO HANDLE ORIENTATION CHANGE
this.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
this.callParent(arguments);
},
handlePainted: function() {
console.log('rpc.view.home.indexView ~ handlePainted');
loadHomeBanner();
},
handleOrientationChange: function(){
console.log('rpc.view.home.indexView ~ handleOrientationChange');
loadHomeBanner();
}
});

Answer 1

Orientation change is handled by the Viewport. Here's the working snippet
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
Essentially, on the initialization of a Panel, you add a listener (where on is an alias for addListner) to the panel. From there, you create a new method called 'handleOrientationChange` (or whatever you want to call it) that will execute when the Viewport Orientation Changed
Ext.define('app.view.home.indexView', {
extend: 'Ext.Panel',
alias: 'widget.home-indexView',
config: {
//...
},
// Fires when the Panel is initialized
initialize: function () {
console.log('app.view.home.indexView ~ initialize');
// Add a Listener. Listen for [Viewport ~ Orientation] Change.
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
this.callParent(arguments);
},
handleOrientationChange: function(){
console.log('rpc.view.home.indexView ~ handleOrientationChange');
// Execute the code that needs to fire on Orientation Change.
}
};

Answer 2

To add to Chase's solution, the orientationchange event can provide four parameters as follows:
handleOrientationChange: function(viewport, orientation, width, height){
console.log('rpc.view.home.indexView ~ handleOrientationChange');
// Execute the code that needs to fire on Orientation Change.
alert('o:' + orientation + ' w:' + width + ' h:' + height);
}