0

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

我有点不清楚我应该听什么，我是否应该在 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/

4

1 回答 1

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);
}
于 2012-08-08T17:08:42.523 回答