Question

我有一个“搜索”按钮。当我点击它时，它正在网格中进行一些搜索和加载数据。

我想在这里添加Mask和Unmask功能。我正在使用extJS5

                {
                    xtype: 'button', 
                    text: 'Search',
                    handler : function () {
                        var searchPanel = Ext.getCmp('searchPanel'),
                            grid = Ext.getCmp('searchResultsGrid'),
                            searchCrit = searchPanel.gatherCriteria();
                        Ext.getBody().mask("Loading Data ..");
                        grid.executeSearch(searchCrit);
                        Ext.getBody().unmask();
                    }
                }

我添加了Ext.getBody().mask("Loading Data ..");和Ext.getBody().unmask();。但它运作不正常。

任何想法，如何在事件中屏蔽和取消屏蔽面板。

Answer 1

这取决于您使用的代理。如果使用内存代理，则不显示掩码，因为一切都是立即执行，浏览器无法使其可见。 IMO使其可见的最佳方式是使用defer：

Ext.getBody().mask("Loading Data ..");
Ext.Function.defer(function() {
    grid.executeSearch(searchCrit);
    Ext.getBody().unmask();
}, 10);

这将为浏览器提供足够的时间使面具可见。

如果您使用任何其他代理，则网格异步加载数据，因此您需要在load事件触发后取消屏蔽它，executeSearch调用之后不显示：

Ext.getBody().mask("Loading Data ..");
grid.executeSearch(searchCrit);
grid.on('load', function() {
    Ext.getBody().unmask();
}, grid, { single: true });

默认情况下，BTW网格启用了屏蔽（loadMask配置参数Ext.grid.View）。你可能有一些错误的配置。请查看此示例：http://jsfiddle.net/seur2aLx/9/

如何屏蔽和取消屏蔽面板

1 个答案: