2011-07-27 62 views
1

我試圖在用戶等待顯示面板時顯示加載掩碼。Ext.LoadMask停留在加載面板的背景中

我用Ext.LoadMask這樣的:

loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."}); 

loadingMask.show(); 
panel = new MyPanel(); 
panel .show(); 

,並在面板的一個AfterRender

this.listeners = { 
     afterrender: function() { 
     loadingMask.hide(); 
     } 
} 

但沒有顯示任何裝載面具,直到面板來了,當我關閉面板我看到了裝載面膜。

我想這意味着我的加載蒙板在後臺運行,所以我看不到它。

您是否有解決此問題的解決方案?這似乎是我想的一個層次問題。

我怎樣才能讓加載掩碼顯示在頂部,並在面板的afterrender隱藏它?

謝謝。

回答

1

我把MyPanel的表演功能DelayedTask的。 然後我把unmask實現放在MyPanel的beforedestroy監聽器中。 我認爲這個LoadMask應該有一些回調機制。 當我把節目放在一個和其他層之後會搞砸。

+0

請分享您的代碼,這將是有用的 – Vinodh

3

我認爲你在尋找這樣的事情:

Ext.onReady(function(){ 
      var loadingMask = new Ext.LoadMask(Ext.getBody(), { 
       msg: "Loading..." 
      }); 

      loadingMask.show(); 
      var panel = new Ext.Panel({ 
       renderTo: 'div1', 
       width: 100, 
       height: 100, 
       title: 'MyPanel', 
       listeners: { 
        afterrender: function(){ 
         loadingMask.hide(); 
        } 
       } 
      });   

     }); 

我已經包括了renderTo配置選項告訴分機在哪裏創建頁面上的面板。除了你的例子中的一些拼寫錯誤之外,我認爲主要的問題是你的afterrender處理程序不會觸發,因爲你沒有將它附加到面板對象。您需要將其分配爲您的配置選項的一部分。您正在將您的afterrender處理程序分配給'this',這很可能是您示例中的頂級窗口對象。

+0

感謝史蒂夫您的迴應。實際上我沒有在我的應用程序中使用任何div。我有不同的面板顯示在index.html.I顯示並摧毀或隱藏每一個。我想也許我需要一些回撥機制檢查面板是否呈現或有點隱藏加載掩碼? –

+0

我在這裏有點困惑。你是否說當你將它作爲配置的一部分包含後,afterrender事件不會觸發? afterrender事件實際上是一個回調。 –

1

這可能會爲你工作:

添加加載面具

Ext.getBody().mask('Loading...', 'x-mask-loading', false); 

刪除加載面具

Ext.getBody().unmask(); 
+0

謝謝保羅它不是我正在尋找,但很容易的方式來顯示和隱藏mask.I使用undesk在面板beforedestroy。 –