ExtJS 3 - 当 ExtJS 完全加载时会触发哪个事件？

Question

我正在使用Extjs开发我的应用程序。当Extjs完全加载应用程序（包括图片和其他内容）时，哪个事件/监听器会被触发？

我尝试了以下方法，但都没有起作用： - body或window的onload事件（body标签为空） - viewport渲染监听器

目前我在做什么：当我启动应用程序时，它会显示“加载”遮罩。然后会发送一个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
    }

});

有什么想法吗？非常感谢您的帮助。

- user427969

---

为什么不使用 Ext.onReady？ - Egy Mohammad Erdin

在 Ext.onReady() 中，所有组件都已加载，但在 Ext.onReady 的最后一个语句中，它们并不是100％工作状态。 - user427969

你是在尝试加载自己的图片等内容吗？然后在所有组件加载完成后使用ext吗？ - Egy Mohammad Erdin

@Warung Nasi 49 不，我只使用ExtJS组件。谢谢。 - user427969

Answer 1

你所提到的ExtJs版本是3.x还是4.x？

如果是4.x，请考虑使用/遵循MVC应用程序架构指南。在这种情况下，您需要按照MVC应用程序架构或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

- Amol Katdare

---

嗨，感谢您的回复。我已经更新了我的问题以反映我想要的内容。问候 - user427969

更新的答案。这也有一个好的副作用，即在使用UI时自动显示和隐藏任何ajax调用的掩码。 - Amol Katdare

Answer 2

根据您的更新...我得出结论，您正在使用Ext版本3.x.x

当我启动应用程序时，它会显示“加载”遮罩。然后触发一个ajax请求，当它完成时，“加载”遮罩被移除

您是如何调用ajax的？为什么不在ajax回调函数中隐藏遮罩？

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

或者，也许你想尝试这个（链接）（这是我用来展示预加载的方法）。

- Egy Mohammad Erdin

---

嗨，感谢您的回复。目前我只在callback()方法中隐藏了mask，但我的ajax请求很耗时，所以我不想等那么久。另外，我尝试了链接，但我不能使用它，因为我正在body上使用mask，所以它会隐藏body。谢谢。 - user427969

Answer 3

尝试使用afterlayout事件，并指定在触发时执行的方法。

- Marouane Gazanayi

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);

});

- user427969