如何處理Sencha Touch V2中的方向更改

Question

我有一個Panel，如果方向更改需要執行一些Javascript。我如何處理sencha-touch-2中的方向更改？

這基本上是我試圖去上班

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

重點線這裏的環境。

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

方向更改由視口處理。這裏的工作片斷

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

從本質上講，在面板的初始化，您可以添加一個監聽器（其中on是addListner的別名）到面板上。從那裏，你創建一個名爲「handleOrientationChange`新方法（或任何你想將它命名），將執行時視口朝向變爲

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

要添加到大通的解決方案，orientationChange事件可以提供四個參數爲如下：

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