如何将全局加载掩码添加到煎茶选项卡面板的主控制器

Question

我的基于选项卡面板的应用程序即将完成，但我想通过添加一个全局加载掩码来改进它，该掩码出现在我的选项卡面板的每次点击中，并在呈现特定选项卡的内容后消失。

我

有点不清楚我应该听什么，我应该在 activeitemchange 上激活加载掩码，然后使用全局绘制事件取消屏蔽它吗？我假设最有效的方法是在我的主控制器中，因为那时我只需要这样做一次，而不是有多个侦听器（就像我找到的唯一示例一样）。这似乎有效，我在单击选项卡项时得到一个加载掩码，但我不确定如何在绘制的事件上取消掩码：

Ext.define('TCApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
     tabpanel: 'tabpanel'
},
control: {
     tabpanel: {
     activeitemchange: 'onActiveItemChange'
                   }
         }
},
onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
}
});

这是最好的方法，将Ext.Viewport.setMasked(false);放在主控制器中的绘画事件上吗？我真的不确定该怎么做。

我也一直在读这篇文章，但我认为它没有多大帮助：

http://senchaexamples.com/2012/03/05/determining-when-the-active-item-changes-on-an-ext-tabpanel-container-in-sencha-touch-2/

Answer 1

我不确定当您在选项卡面板上更改活动项目时，它会触发"绘制"事件（您可以对其进行测试）。在我的头顶上（没有测试过这个），你有几个选择。您可以尝试在选项卡面板的控制配置中添加"激活"事件...根据文档，当容器中的项目被激活时，这将触发。

如果这不起作用，那么您可以为onActiveItemChange函数尝试这样的事情：

onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
    newItem.on('painted', this.hideMask, this);
    //might need to try newItem.element.on('painted', this.hideMask, this);
},
hideMask: function() {
    Ext.Viewport.setMasked(false);
}