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

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

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

还要记住在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（）; 当用户点击按钮显示网格时。