11

向きが変わった場合に Javascript を実行する必要がある Panel があります。で方向変更を処理するにはどうすればよいですか?

これは基本的に、私が仕事に取り掛かろうとしている重要な行です

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

2 に答える 2

16

向きの変更はビューポートによって処理されます。これが作業スニペットです

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.
    }
};
于 2011-12-17T16:29:19.070 に答える
12

Chase のソリューションに追加するために、orientationchange イベントは次の 4 つのパラメーターを提供できます。

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);
}
于 2012-02-15T16:40:49.723 に答える