在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加载方法,而不是重新加载.