Cómo manejar el cambio de orientación en Sencha Touch V2

Question

Tengo un panel que necesita ejecutar Javascript si la orientación cambia. ¿Cómo manejo el cambio de orientación en sencha-touch-2?

Esta es básicamente la línea clave que estoy tratando de llegar al trabajo

this.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 }); 

Aquí está el contexto.

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;"><a href="fb://page/234638962305"><img src="/img/facebook.png" /></a><a href="twitter:@rockpointeca"><img src="/img/twitter.png" /></a></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

El cambio de orientación es gestionado por la ventana gráfica. Aquí está el fragmento de código que trabaja

Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 }); 

Esencialmente, en la inicialización de un panel, se agrega un oyente (donde on es un alias para addListner) al panel. A partir de ahí, se crea un nuevo método llamado 'handleOrientationChange` (o como se quiera llamar) que se ejecutará cuando la orientación de la ventana gráfica cambió

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

Para añadir a la solución de Chase, el evento orientationChange puede proporcionar cuatro parámetros como sigue:

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