2010-02-10 82 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