Как обрабатывать изменение ориентации в Sencha Touch V2

У меня есть панель, которая должна выполнить некоторый 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();
    }
});

Ответ 1

Изменение ориентации обрабатывается Viewport. Здесь рабочий фрагмент

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

По существу, при инициализации панели вы добавляете слушатель (где on - псевдоним для addListner) на панель. Оттуда вы создаете новый метод, называемый "handleOrientationChange" (или все, что вы хотите назвать), который будет выполняться при изменении параметра Viewport Orientation 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.
    }
};

Ответ 2

Чтобы добавить решение Chase, событие changechange может предоставить четыре параметра следующим образом:

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