0

Sencha Touch 2でタブを変更する間にタブパネルにロードマスクを表示したい場合、正しいアプローチは何ですか？

タブボタンが押されたときにロードマスクを表示し、パネルが正しく表示されたらすぐに非表示にしたい。

Ext.define("MyProject.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar','Ext.MessageBox'
    ],
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
        layout: {
            type: 'card',
            animation: 'fade' //false, fade, flip, pop, scroll, slide
        },

        items: [
            {
                xtype: 'panel1',

                masked: {
                    xtype:'loadmask',                        
                    message:'Chargement...'
                },

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        //Ext.Msg.alert('Test', 'painted');
                        this.setMasked(false);
                    }
                }
            },
                {
                xtype: 'panel2',

                masked: {
                    xtype:'loadmask',                        
                    message:'Chargement...'
                },

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        //Ext.Msg.alert('Test', 'painted');
                        this.setMasked(false);
                    }
                }
            },

問題は、イベントがトラップされていることですが、子アイテムの作成時にマスクを表示しているため、マスクが表示されていません。onActiveItemChangedのようなイベントが必要ですが、AFTERではなくBEFOREで発生します。誰もがそれをどのように実装できるかについての考えを持っていますか？

更新：SenchaTouchフォーラムにあるコードを追加してほぼ完成しました。メインビュー（タブパネル）レベルで追加：

listeners: {
            delegate : 'tabbar > tab',
            tap : function() {
                Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
            }
        }

次に、各アイテムについて、タブパネルに追加します。

xtype: 'panel1',

                listeners: {
                    painted: function(container, value, oldValue, eOpts) {
                        Ext.Viewport.setMask('false');
                    }
                }

しかし、現在の問題は、デフォルトの「タップ」イベントリスナーをオーバーライドするため、ボタンをクリックしても、常に同じタブに留まり、他のリスナーを表示しないことです。それでも、新しいタブのペイントされたイベントは発生します。

4

1 に答える 1

1

Ext.LoadMask通常、タップイベントでAjaxまたはJsonリクエストを適用するときに使用するだけなので、そのような結果を達成できるかどうかはわかりません。

しかし、あなたの場合、各パネルのタブパネルのコンテンツは既に読み込まれているため、ここでマスキングを使用すると、少し冗長な作業を感じます。activeitemchangeただし、次のようにイベントが発生したときに、たとえば 1 秒間偽のマスクの読み込みを行うことができます。

listeners: {
activeitemchange:function(){
    function setMask() {
        Ext.Viewport.mask({ xtype: 'loadmask', message: 'Chargement...' });
    }

    function unMask() {
        Ext.Viewport.unmask();
    }

    function start() {
        setMask();
        setTimeout(unMask, 1000); // execute the mask in 1 second
    }

    start();
}};

ちなみに、このactiveitemchangeイベントは、タブパネルのすべての項目を定義した後に配置する必要があります。それが役に立てば幸い ：）

于 2012-11-03T03:52:30.447 に答える