在 ExtJS 中，如何在显示网格时加载商店? [英] In ExtJS, how do I load a store when I display a grid?

问题描述

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

In ExtJS, how do I load a store when I display a grid? I want the store to load only when the grid is displayed (the user clicks on a button to show the grid, so it's wasteful to load the store beforehand). I tried the afterrender listener but it renders the loadmask in the wrong location, and the afterlayout listener reloads the grid every time the grid is resized.

推荐答案

这是其中一件完成起来可能有点麻烦的事情，因为一次让浏览器有太多事情要做(尤其是在 IE 中).

This is one of those things that can be a bit of a pain to accomplish because were giving the browser too much to do at once (particularly noticeable in IE).

我喜欢结合使用 defer 来让浏览器恢复足够长的时间以正确呈现内容.

I like to use a combination of defer to let the browser recover long enough to render things properly.

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

使用延迟/延迟的值应该会给你想要的结果.您需要延迟/推迟的时间长短取决于您的网格有多复杂以及浏览器有多快.

Playing with the value of delay/defer should give you the desired results. The length of time you will need to delay/defer is dependent upon how complex your Grid is and how fast the browser is.

还要记得在 Store 加载完成后取下掩码.

Also remember to remove the mask when your Store's load has completed.

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

注意:只需对 Lloyd 的答案进行一些澄清 - 您不需要将 autoLoad 设置为 false，因为这是默认设置(即:根本不设置它)，而且从您的描述中听起来，您想使用 Stores 加载方法，而不是重新加载.

NOTE: Just a few clarifications to the answer by Lloyd - you do not need to set autoLoad to false, because that is the default (ie: don't set it at all) and it sounds like from your description that you would want to use the Stores load method, instead of reload.

这篇关于在 ExtJS 中，如何在显示网格时加载商店?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！