2010-02-10 84 views
7

在ExtJS中,如何在显示网格时加载商店?我希望商店只在显示网格时加载(用户单击按钮显示网格,因此预先加载商店是浪费)。我尝试了afterrender侦听器,但它会将加载掩码渲染到错误的位置,并且每当网格调整大小时,afterlayout侦听器都会重新加载网格。在ExtJS中,如何在显示网格时加载商店?

回答

13

这是可能会让人难以完成的事情之一,因为一次给浏览器提供太多的帮助(特别是在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 
    } 
}); 

玩延迟值/推迟值应该会给你想要的结果。您需要延迟/推迟的时间长短取决于网格的复杂程度和浏览器的速度。

还记得当您的商店的加载完成时删除面具。

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

注:就在几个澄清由劳埃德答案 - 你并不需要自动加载设置为false,因为这是默认的(即:不设置它在所有),它听起来像是你的描述你想使用商店装载方法,而不是重新加载。

+0

这是一个很好的方法,但如果你发现你真的需要它,我只会应用遮罩。如果加载速度太快,那么面罩可能看起来像闪烁。此外,请确保您在商店的加载事件处理程序中取消屏蔽。布局浏览器组合示例“带有嵌套布局的选项卡”在其内部网格中使用此存储装载的渲染方法:http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html – 2010-02-10 14:53:53

+0

我同意Brian的评论 - 如果您的数据在不到5秒的时间内恢复,请不要这样做。用户永远不会注意到它。 添加了关于删除面具的消息,谢谢。 – 2010-02-10 15:01:39

+0

不错的一个..只是想知道,'延迟:200'有什么用?这是必要的吗? – Gugan 2015-01-06 09:43:01

0

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

+2

这是有效的,但这意味着网格不负责自己的商店。如果您跨多个组件共享商店,那很好,但对于单个网格,我宁愿让网格负责存储加载。 – 2010-02-10 18:15:01

2

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

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

这里thisGridPanel