Question

在ExtJS中，如何在显示网格时加载商店？我希望商店只在显示网格时加载（用户点击按钮显示网格，因此预先加载商店是浪费的）。我尝试了afterrender侦听器，但它将loadmask呈现在错误的位置，并且afterlayout侦听器每次调整网格大小时都会重新加载网格。

Answer 1

这可能是一件令人痛苦的事情之一，因为它给浏览器提供了太多的帮助（在IE中尤为明显）。

我喜欢使用延迟组合让浏览器恢复足够长的时间来正确渲染。

var grid = new Ext.grid.GridPanel({
    ...,
    listeners : {
       render : function(grid){      
           grid.body.mask('Loading...');
           var store = grid.getStore();
           store.load.defer(100, store);
       },
       delay: 200
    }
});

使用延迟/延迟值可以获得所需的结果。延迟/延迟所需的时间长短取决于网格的复杂程度和浏览器的速度。

还要记住在Store的加载完成后删除掩码。

listeners: {
    load: function(){
        yourGrid.body.unmask();
    }
}

注意：Lloyd对答案的一些澄清 - 您不需要将autoLoad设置为false，因为这是默认设置（即：根本不设置）并且听起来就像您的描述中的那样想要使用Stores加载方法，而不是重新加载。

Answer 2

您是否考虑过处理activate事件？您可以添加一个事件处理程序，用于在activate事件上加载数据，然后将其自行删除。

this.on('activate', function(){
 this.un('activate', arguments.callee);
    this.store.load();
}, this);

此处this指的是GridPanel。

Answer 3

您可以为商店将autoLoad设置为false，然后调用store.reload（）;当用户点击按钮显示网格时。

在ExtJS中，如何在显示网格时加载商店？

3 个答案: