EXTJS

Question

我想展示源代码，它取自 div 和 jQuery，在 Ext.Window 中。我设法做到了，但我的问题是有时源代码很大，因为它包含编码图像，并且 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);
    });

Answer 2

您可以尝试仅在 window 已经显示后设置值：

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 的 mask/unmask 方法，尽管我建议你搜索一些在设置值后发生的事件以删除掩码（你可以尝试 change textarea 上的事件），因为这样你的等待时间就不会是固定的，而是与渲染 textarea 值所花费的时间有关。

EXTJS - 加载掩码

EXTJS - Load Mask

javascript

jquery

extjs4.2