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

Posted 2023-02-25

【中文标题】Sencha Touch V2 中如何处理方向变化

【英文标题】：How to handle Orientation Change in Sencha Touch V2

【发布时间】：2011-12-16 23:44:31

【问题描述】：

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

方向变化由视口处理。这是工作的sn-p

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

【讨论】：

你能简单解释一下吗，我如何在android中使用这段代码来处理方向变化，或者如果你有任何链接，请提前分享...

PS：由于sench-touch 是基于 HTML5、CSS3 和 Javascript 构建的，这将适用于 ios、Android，我认为是 BB6。

【参考方案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);