Question

我正在尝试为我的视口设置加载蒙版，因为它需要花费大量时间来加载它。我试过这个：

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。我在console.log函数中尝试使用beforerender，但它也没有出现。当我这样做时：

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错误的方式以及在myMask开始渲染时准确启动Viewport的方式是什么？

由于

Leron

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

Answer 2

在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。

ExtJS 4设置视口的加载掩码

2 个答案: