Come gestire la modifica dell'orientamento in Sencha Touch V2

Question

Ho un pannello che deve eseguire alcuni Javascript se l'orientamento cambia. Come gestisco la modifica dell'orientamento in sencha-touch-2?

Questa è fondamentalmente la linea chiave che sto cercando di andare al lavoro

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

Ecco il contesto.

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

Il cambio di orientamento viene gestito da Viewport. Qui sta il working frammento

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

In sostanza, sulla inizializzazione di un pannello, si aggiunge un ascoltatore (dove on è un alias per addListner) al pannello. Da lì, si crea un nuovo metodo chiamato 'handleOrientationChange` (o come volete chiamarlo) che verrà eseguito quando l'orientamento della vista cambiato

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

Per aggiungere alla soluzione di Chase, l'evento orientationChange in grado di fornire quattro parametri come segue:

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