ExtJS 4.1 MVC: Cách áp dụng LoadMask cho chế độ xem trong khi tải?

Question

Cách áp dụng LoadMask cho chế độ xem của standard ExtJS MVC application trong khi đang tải các tệp được yêu cầu?

Một ví dụ về ứng dụng MVC như vậy là đoạn mã sau đây cho app.js:

Ext.Loader.setConfig({enabled:true}); 

Ext.application({ 
    requires: [ 
     'Ext.container.Viewport', 
    ], 

    name: 'APP', 
    appFolder: 'app', 

    controllers: [ 
     'Main' 
    ], 

    launch: function() { 

     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'main' 
       }    
      ] 
     }); 
    } 
}); 

nơi main trên là một xtype cho một cái nhìn MVC, mà có thể kéo dài một ExtJS Panel, vv

Liệu một tiêu chuẩn cách tiếp cận cho yêu cầu phổ biến ở đây có nghĩa là tồn tại?

Answer 1

Điều bạn muốn làm là hiển thị hình ảnh tải bên trong tệp index.html của bạn. một cái gì đó như thế:

<div id="page-loader"> 
    <img style="position:absolute; width:128px; height:15px; left:50%; top:50%; margin-left:-64px; margin-top: -7px;" src="resources/images/loader.gif" /> 
</div> 

Và sau đó ẩn này div chức năng launch() của bạn:

if (Ext.get('page-loader')) { 
    Ext.get('page-loader').remove(); 
} 

Answer 2

Các giải pháp đầu tiên là tốt. Một giải pháp thay thế là:

http://blog.newbridgegreen.com/extjs-4-splash-screen/