javascript - ExtJS 4 设置视口(viewport)的加载掩码

Question

我正在尝试为我的视口(viewport)设置加载 mask ，因为加载它需要很多时间。我试过这个:

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 的方式是什么？

谢谢

莱伦

Answer 1

您的代码没有为 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