Question

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

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

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

如何将全局loadmask添加到Sencha Tabpanel的主控制器？

1 个答案: