Jak radzić sobie ze zmianą orientacji w Sencha Touch V2

Question

Mam panel, który musi wykonać trochę kodu JavaScript, jeśli zmieni się orientacja. Jak obsłużyć zmianę orientacji w sencha-touch-2?

Jest to w zasadzie kluczem linia Próbuję dostać się do pracy

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

Oto kontekst.

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

Zmiana orientacji jest obsługiwana przez rzutnię. Oto pracę snippet

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

Zasadniczo na inicjalizacji z panelu, należy dodać detektor (gdzie on jest aliasem dla addListner) do centrali. Stamtąd można utworzyć nową metodę o nazwie „handleOrientationChange` (lub cokolwiek chcesz to nazwać), który będzie wykonywał podczas orientacji rzutni Zmieniono

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

Aby dodać do roztworu Chase'a, zdarzenie orientationChange może dostarczyć cztery parametry jak następująco:

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