Question

我正在为我的应用程序使用Extjs。当extjs完全加载应用程序（图像和所有内容）时会触发哪个事件/侦听器？

我试过以下但没有一个有效：

正文或窗口载入（正文标记为空）
viewport render listener

我目前正在做什么：当我启动应用程序时，它显示“加载”掩码。然后触发ajax请求，当它完成时，删除“加载”掩码。以下可能会提出一些想法：

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        Ext.ux.mask.hide(); // Hide the mask
    }
});

问题是ajax请求现在需要花费很多时间，所以我想改变工作方式如下：

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        //Ext.ux.mask.hide();   // Hide the mask - removed
    }

    // I want to call this when everything is loaded on the page
    function everything_loaded() {
        Ext.ux.mask.hide(); // Hide the mask
    }

});

对此有何想法？非常感谢您的帮助。

Answer 1

你指的是什么ExtJs版本？ 3.x或4.x？

如果是4.x，请考虑使用/遵循MVC Application Architecture指南。在这种情况下，您要按MVC Application Architecture或Ext.app.Application

中的说明覆盖Ext.application.launch

如果是3.x，我猜Ext.onReady()是他们最好的。

<强>更新

根据您更新的问题，这就是您要寻找的 -


Ext.onReady(function(){
    Ext.Ajax.on('beforerequest', showSpinner, this);
    Ext.Ajax.on('requestcomplete', hideSpinner, this);
    Ext.Ajax.on('requestexception', hideSpinner, this);
...
}); //end of onReady

showSpinner = function(){
  //setup and show mask
}

hideSpinner = function(){
 //hide mask
}

参考 - Ext.Ajax

Answer 2

基于您的更新......我得出结论您正在使用Ext版本3.x.x

当我启动应用程序时，它会显示“加载”掩码。然后触发ajax请求，完成，“加载”掩码删除

你是怎么称呼ajax的？为什么不在ajax回调中隐藏掩码？

Ext.Ajax.request({
    url : "blabla",
    method : "GET",
    callback : function(){
        Ext.ux.mask.hide();
    }
});

或者，mybe你想试试这个one（这是我以前用来显示预载的）

Answer 3

尝试afterlayout事件并指定一个在被触发时执行的方法

Answer 4

感谢amol和Warung Nasi 49.虽然我找不到最好的方法，但我设法得到了几乎预期的结果：

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...

    setTimeout(function(){
        Ext.ux.mask.hide(); 
    }, 2000);

});

extjs 3 - 当extjs被完全加载时会触发哪个事件

4 个答案: