EXTJS加载遮罩实现：Ext.Window加载大源码时显示加载图标

我来给你捋个实用的解决方案，核心思路就是先让窗口快速显示（带加载状态），再异步加载并渲染大内容，这样用户不会等半天看不到反馈，体验直接拉满。

方案一：先渲染加载组件，数据就绪后替换成代码区域 #

这种方式是先给窗口塞一个简单的加载提示组件，等你的源代码准备好之后，再把加载组件替换成显示代码的文本域：

// 第一步：创建带加载提示的空窗口
var win = new Ext.Window({
    title: 'Source Code',
    width: 800,
    height: 300,
    layout: 'fit', // 用fit布局让组件占满窗口
    items: [{
        xtype: 'component',
        html: '<div style="text-align:center; padding:100px 0;"><img src="/你的加载图标路径/loading.gif" alt="加载中..." /> 正在加载源代码...</div>'
    }]
});

// 先把窗口显示出来，让用户立刻看到反馈
win.show();

// 第二步：异步处理源代码获取（哪怕是同步的jQuery操作，也用defer让窗口先渲染）
Ext.defer(function() {
    // 这里放你的jQuery获取源代码逻辑
    var sourceCode = $('#目标div的ID').html();
    
    // 移除加载组件，添加代码文本域
    win.removeAll(true);
    win.add({
        xtype: 'textarea',
        value: sourceCode,
        readOnly: true,
        autoScroll: true,
        layout: 'fit'
    });
    
    // 强制窗口重新布局，确保新组件正确渲染
    win.doLayout();
}, 100); // 100ms延迟是为了确保窗口先完成渲染，可根据实际情况调整

方案二：用Ext.LoadMask给窗口加加载遮罩 #

如果不想替换组件，也可以直接给窗口添加官方的加载遮罩，等数据就绪后再移除遮罩：

// 创建带空文本域的窗口
var win = new Ext.Window({
    title: 'Source Code',
    width: 800,
    height: 300,
    layout: 'fit',
    items: [{
        xtype: 'textarea',
        readOnly: true,
        autoScroll: true,
        value: '' // 先留空
    }]
});

win.show();

// 给窗口添加加载遮罩
var loadingMask = new Ext.LoadMask(win.getEl(), {msg: '正在加载源代码，请稍候...'});
loadingMask.show();

// 获取源代码（同样用defer确保遮罩先显示出来）
Ext.defer(function() {
    var sourceCode = $('#目标div的ID').html();
    
    // 更新文本域内容
    win.items.get(0).setValue(sourceCode);
    
    // 移除加载遮罩
    loadingMask.hide();
}, 50);

为什么这个方案能解决问题？ #

原来的写法是把大内容直接塞进Window的items里，Ext在创建窗口时就要同步渲染这个超大的内容，导致窗口迟迟弹不出来。现在我们先让窗口快速渲染出轻量的加载提示，再后台处理大内容的准备和渲染，用户能立刻看到窗口和加载状态，不会觉得页面“卡死掉了”。

如果你的源代码里有大量base64图片导致体积特别大，还可以考虑对内容做一下预处理，比如把base64图片替换成占位符（如果不需要显示图片的话），进一步加快渲染速度。

内容的提问来源于stack exchange，提问作者Makis