Question

如果我想在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”事件监听器，它总是停留在同一个选项卡上，即使我们点击按钮也不会显示其他选项卡。然而，新标签的绘制事件被解雇了。

Answer 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事件。希望它有所帮助：）

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

1 个答案: