title: How to handle Orientation Change in Sencha Touch V2
body: <p>I've got a Panel that needs to execute some Javascript if the orientation changes. How do I handle the Orientation Change in <a href="/questions/tagged/sencha-touch-2" class="post-tag" title="show questions tagged 'sencha-touch-2'" rel="tag">sencha-touch-2</a>?</p>
  
  <p>This is basically the key line I'm trying to get to work</p>
  
  <pre class="lang-js prettyprint-override"><code>this.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
  </code></pre>
  
  <p>Here's the context.</p>
  
  <pre class="lang-js prettyprint-override"><code>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: '&lt;div style="width:100%; height:150px;"&gt;&lt;ol id="AN-sObj-parentOl"&gt;&lt;li id="AN-sObj-scene-0"&gt;&lt;div class="AN-sObj-stage" id="ext-gen5089"&gt;&lt;div class="AN-Object" id="AN-sObj-60"&gt;&lt;div id="AN-sObj-val-60"&gt;&lt;img src="img/banner-3.jpg" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="AN-sObj-61"&gt;&lt;span&gt;Relentlessly Focused On The Lost&lt;/span&gt;&lt;/div&gt;&lt;div id="AN-sObj-62"&gt;&lt;span&gt;Passionately Devoted To God&lt;/span&gt;&lt;/div&gt;&lt;div id="AN-sObj-63"&gt;&lt;span&gt;Deeply Committed To One Another&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/div&gt;'
                 }]
              }, {
                 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: '&lt;div style="text-align: right; width:100%; padding-right: 5px;"&gt;&lt;a href="fb://page/234638962305"&gt;&lt;img src="/img/facebook.png" /&gt;&lt;/a&gt;&lt;a href="twitter:@rockpointeca"&gt;&lt;img src="/img/twitter.png" /&gt;&lt;/a&gt;&lt;/div&gt;'
                 }]
              }]
          }]
      },
      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();
      }
  });
  </code></pre>