2

我正在尝试为我的视口设置一个加载蒙版，因为加载它需要很多时间。我试过这个：

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开始渲染时准确启动的方式是什么？

谢谢

勒隆

4

2 回答 2

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

于 2012-05-18T13:13:41.037 回答
1

在 ExtJs 4 中，您可以在视口中声明加载掩码：

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。

于 2013-08-30T15:20:12.377 回答