javascript - EXTJS - 加载掩码

Question

我想展示源代码，它是从 Ext.Window 内的带有 jQ​​uery 的 div 中获取的。我已经设法做到了这一点，但我的问题是，有时源代码很大，因为它包含编码图像，并且 Ext.Window 在通过单击触发后需要一些时间才能出现在屏幕上事件。我想展示 Ext.Window 但带有加载图标，直到数据准备就绪。

win = new Ext.Window ({
    title:'Source Code',
    width:800,
    height:300,
    items: [{
        xtype : 'textarea',
        readOnly: true,
        value: sourceCode
    }]
});
win.show();

Answer 1

尝试使用未定义的函数和 setTimeout 函数。不要忘记配置布局:“fit”。

Ext.application({
name : 'Fiddle',

launch : function() {
       var win =  Ext.create('Ext.window.Window', {
            title:'Source Code',
            width:800,
            height:300,
            layout: 'fit',
            items: [{
                xtype : 'textarea',
                readOnly: true,
                value: 'test'
            }]
        });


        win.show(undefined, function(){
            win.getEl().mask('Loading...');

            setTimeout(function() {
                win.getEl().unmask();
            }, 3000);

        });
    }

});

或者

Ext.application({
name : 'Fiddle',

launch : function() {
   Ext.create('Ext.window.Window', {
        title:'Source Code',
        width:800,
        height:300,
        layout: 'fit',
        items: [{
            xtype : 'textarea',
            readOnly: true,
            value: 'test'
        }]
    }).show(undefined, function(){
        win.getEl().mask('Loading...');

        setTimeout(function() {
            win.getEl().unmask();
        }, 3000);

     });
  }

});

尝试

    win.show(undefined, function(){
        win.getEl().mask('Loading...');
        win.suspendEvents();
        win.down('textarea').setValue(sourceCode);
        win.down('textarea').focus();
        win.resumeEvents();
        setTimeout(function() {
            win.getEl().unmask();
        }, 2000);
    });