Cách xử lý Thay đổi hướng trong Sencha Touch V2

Question

Tôi có Bảng điều khiển cần thực thi một số Javascript nếu định hướng thay đổi. Làm cách nào để xử lý Thay đổi hướng trong sencha-touch-2?

này về cơ bản là dòng chính Tôi đang cố gắng để có được để làm việc

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

Dưới đây là bối cảnh.

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

Thay đổi hướng được xử lý bởi Chế độ xem. Dưới đây là những đoạn mã làm việc

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

Về cơ bản, trên khởi tạo của một Panel, bạn thêm một người biết lắng nghe (nơi on là một bí danh cho addListner) vào bảng. Từ đó, bạn tạo ra một phương pháp mới gọi là 'handleOrientationChange` (hoặc bất cứ điều gì bạn muốn gọi nó) mà sẽ thực hiện khi Định hướng Viewport Changed

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

Bổ sung vào giải pháp của Chase, sự kiện orientationchange có thể cung cấp bốn thông số như sau:

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