EXTJS - 加载蒙版

时间:2018-03-27 10:21:43

标签: javascript jquery extjs extjs4.2

我想在Ext.Window内提供源代码,该代码是使用jQuery从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();

2 个答案:

答案 0 :(得分: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);

     });
  }

});

TRY

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

答案 1 :(得分:1)

您可以尝试的是仅在窗口显示后设置值:

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

然后你可以添加josei的掩码/取消掩码方法,虽然我建议你搜索一下在设置值后删除掩码时发生的事件(你可以尝试{{1在textarea上的事件),因为这样你的等待不会是一个固定的时间,但与渲染textarea值所需的时间有关。