sencha-touch-2 - Sencha Touch V2 中如何处理方向变化

Question

如果方向发生变化，我有一个需要执行一些 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

方向更改由视口(viewport)处理。这是工作片段

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

本质上，在面板初始化时，您向面板添加了一个监听器(其中 on 是 addListner 的别名)。从那里，您创建一个名为“handleOrientationChange”(或您想调用的任何名称)的新方法，该方法将在视口(viewport)方向更改时执行

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