Sencha Touch 2 - 在TabPanel项目更改时的Ext.LoadMask

时间:2012-11-03 02:14:39

标签: load sencha-touch-2 mask tabpanel

如果我想在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这样的事件但是BEFORE而不是AFTER之后。任何人都知道如何实现它?

更新:我几乎在Sencha Touch论坛上添加了代码。在主视图(选项卡面板)级别添加:

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

但现在的问题是,由于我覆盖默认的“tap”事件监听器,它总是停留在同一个选项卡上,即使我们点击按钮也不会显示其他选项卡。然而,新标签的绘制事件被解雇了。

1 个答案:

答案 0 :(得分:1)

我不确定你能否达到这样的结果,因为通常我在点击事件上应用Ajax或Json请求时只使用Ext.LoadMask

但是在你的情况下,每个面板的tabpanel内容已经加载,所以当你在这里使用masking时,我觉得有点多余的任务。但是,如果你的activeitemchange事件被解雇,你可以伪造一个假面具加载一秒钟:

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

顺便说一下,在定义tabpanel的所有项目之后,需要放置此activeitemchange事件。希望它有所帮助:)