ExtJS 4設置視口的加載蒙版

我想爲我的視口設置一個加載蒙版，因爲加載它需要很多時間。我已經試過這樣：ExtJS 4設置視口的加載蒙版

Ext.define('MY.view.Viewport', { 
    extend: 'Ext.Viewport', 
    alias: 'widget.dispviewport', 

    initComponent: function() { 
     var me = this; 
     var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
//  myMask.show(); 
     Ext.apply(me, { 
      id : 'main-viewport', 
      listeners: { 
       beforerender: function() { 
        myMask.show(); 
       }, 
       afterrender: function() { 
        myMask.destroy(); 
       } 
      }, 
      renderTo: 'id-sym-container', 
      layout: {...

但似乎我從來沒有在beforerender。我在beforerender函數中嘗試了console.log，但它也沒有出現。當我嘗試這樣的：

Ext.define('MY.view.Viewport', { 
    extend: 'Ext.Viewport', 
    alias: 'widget.dispviewport', 

    initComponent: function() { 
     var me = this; 
     var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
     myMask.show(); 
     Ext.apply(me, { 
      id : 'main-viewport', 
      listeners: { 
//    beforerender: function() { 
//     myMask.show(); 
//    }, 
       afterrender: function() { 
        myMask.destroy(); 
       } 
      },

它的工作原理，但我的面具顯示方式來不及。我是否正在使用beforerender錯誤的方式，以及當我的Viewport開始渲染時，啓動myMask的方法是什麼？

感謝

Leron

來源

2012-05-15 Leron

爲什麼加載視口需要很長時間？你是否使用Sencha SDK合併並縮小了所有的JS文件？ – sha

情況是 - 在我之前有4到8個人一直在從事這個項目，主要問題是ExtJS對我來說是全新的，因此需要花費很多時間來了解不同的功能以及何時獲得一個新的任務，我只是直接前進。對你的問題 - 我不知道這是否已經完成，但由於它處於生產狀態，我猜想沒有什麼可以縮小的。但我認爲在開始時必須有一種方法來啓動加載掩碼，'beforerender'函數看起來像是完美的解決方案，但它不工作，所以...仍在搜索... – Leron

我不想要拖拉你，但我真的認爲你正在努力解決錯誤的問題。檢查網絡流量 - 您的應用加載了多少個JS文件？通常在生產環境中，您應該爲ExtJs加載一個大文件，爲應用加載一個大文件（圖片和CSS當然不包括在內）。它與非縮小應用程序有很大的區別。在我的情況下 - 通常我的應用程序在縮小後加載大約40秒 - 〜5 – sha

代碼未設置裝載掩碼viewport，但對於body

人體工程學你可以做的是，代碼，做位.. 。

Ext.create('MY.view.Viewport');

應該像..

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
viewport = Ext.create('MY.view.Viewport'); 
viewport.on('afterrender',function(){myMask.destroy();},this);

註釋中的人是正確的，雖然：P

來源

2012-05-18 13:13:41 Alex

我不得不調用'myMask.show（）'來顯示加載掩碼，創建它是不夠的。 – stambikk

在ExtJS的4，你可以聲明在視口中loadmask：

Ext.define('Tps.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.viewport', 

    initComponent: function() { 
     Ext.apply(this, { 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'loadmask', 
        id: 'load-indicator', 
        indicator: true, 
        hidden: true, 
        target: this 
       } 
      ] 
     }); 
     this.callParent(); 
    } 
});

注意目標配置是視本身。要顯示/隱藏負載面具，撥打電話到

Ext.getCmp('load-indicator').show(); 
Ext.getCmp('load-indicator').hide();

顯示在視口的渲染事件負載面罩或隱藏的配置設置爲false。

來源

2013-08-30 15:20:12 HandyManDan

ExtJS 4設置視口的加載蒙版

回答

相關問題