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

【问题标题】：In ExtJS, how do I load a store when I display a grid?在 ExtJS 中，如何在显示网格时加载商店？
【发布时间】：2011-01-15 04:39:21
【问题描述】：

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

【问题讨论】：

标签： javascript extjs

【解决方案1】：

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

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

这里this指的是GridPanel。

【讨论】：

【解决方案2】：

这是完成起来可能有点痛苦的事情之一，因为它让浏览器一次做太多事情（在 IE 中尤其明显）。

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

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

使用 delay/defer 的值应该会给你想要的结果。您需要延迟/延迟的时间长度取决于您的 Grid 的复杂程度以及浏览器的速度。

还记得在商店加载完成后移除遮罩。

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

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

【讨论】：

这是一个很好的方法，虽然我只会在你发现你确实需要它时应用掩蔽。如果它加载得太快，那么遮罩可能看起来像闪烁。此外，请确保您在商店的加载事件处理程序中取消屏蔽。布局浏览器组合示例“Tabs with Nested Layouts”在其内部网格中使用了这种在商店加载的渲染方法：extjs.com/deploy/dev/examples/layout-browser/…
我同意 Brian 的 cmets - 如果您的数据在不到 5 秒内返回，请忘记这样做。用户永远不会注意到它。添加了一个关于去除面具的花絮，谢谢。
不错的一个.. 只是想知道，“延迟：200”有什么用？有必要吗？
不应该听 'show' 事件而不是 'render' 带来同样的效果？

【解决方案3】：

您可以将 store 的 autoLoad 设置为 false，然后调用 store.reload();当用户单击按钮以显示网格时。

【讨论】：

这行得通，但是这意味着网格不负责自己的存储。如果您要跨多个组件共享商店，那很好，但对于单个网格，我宁愿让网格负责商店加载。