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

基本上，在初始化Panel时，您需要向面板添加一个监听器（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

要添加到Chase的解决方案，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);
}

如何处理Sencha Touch V2中的方向变化

2 个答案: