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 这样的事件，但在之前而不是之后触发。任何人都知道我该如何实施？

更新：我几乎是通过添加在 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”事件侦听器，它总是停留在同一个选项卡上，即使我们点击一​​个按钮也不会显示其他选项卡。然而，新标签的绘制事件被触发。

4

1 回答 1

1

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

但是在您的情况下，每个面板的选项卡面板内容已经加载，所以当您在这里使用遮罩时，我觉得有点多余的任务。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();
}};

顺便说一句，这个activeitemchange事件需要在你定义了tabpanel的所有项之后放置。希望能帮助到你 ：）

于 2012-11-03T03:52:30.447 回答