ExtJs中API响应后行单元格返回图标遇[object Promise]问题求助

问题原因 #

Ext JS的列renderer函数是同步执行的，它要求立即返回可直接渲染的HTML字符串，而非Promise对象。你当前的代码返回了Promise，组件无法解析异步结果，直接把Promise对象转成字符串[object Promise]显示了。

解决办法 #

方案一：提前加载数据到Record（推荐） #

把logLevel数据提前加载到record中，避免在renderer里发起异步请求：

• 步骤1：store加载主数据后，批量请求所有job的logLevel并更新对应record
• 步骤2：修改renderer，直接从record读取logLevel渲染图标

1. 批量更新record的logLevel数据

// 假设store加载完成后执行回调
store.load({
    callback: function(records) {
        const jobIds = records.map(record => record.get('jobId'));
        jobIds.forEach(jobId => {
            store.sendConfigTaskRequest2(jobId).then(response => {
                const data = Ext.decode(response.responseText);
                const record = store.findRecord('jobId', jobId);
                if (record) {
                    record.set('logLevel', data.logLevel);
                }
            });
        });
    }
});

2. 修改列renderer为同步逻辑

{
    text: 'isLow',
    flex: 1,
    renderer: function(value, metaData, record) {
        const logLevel = record.get('logLevel');
        if (logLevel === 0) {
            return '<div class="u4f-backgroundjobs-alert-icon" style="display: block; margin: 0 auto; height: 20px; width: 20px;" title="Full Log Activated!"></div>';
        }
        return '';
    },
    align: 'center',
    draggable: false,
    resizable: false
}

方案二：异步渲染（占位符+DOM更新） #

如果无法提前加载数据，可在renderer先返回占位符，异步请求完成后更新单元格DOM：

{
    text: 'isLow',
    flex: 1,
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        // 创建唯一占位符ID
        const placeholderId = `log-level-placeholder-${record.get('jobId')}`;
        // 返回占位符
        const placeholder = `<div id="${placeholderId}"></div>`;

        // 异步请求并更新DOM
        store.sendConfigTaskRequest2(record.get('jobId'))
            .then(response => {
                const data = Ext.decode(response.responseText);
                const iconHtml = data.logLevel === 0 
                    ? '<div class="u4f-backgroundjobs-alert-icon" style="display: block; margin: 0 auto; height: 20px; width: 20px;" title="Full Log Activated!"></div>'
                    : '';
                Ext.get(placeholderId).update(iconHtml);
            })
            .catch(error => {
                Ext.get(placeholderId).update('<span style="color: red;">加载失败</span>');
            });

        return placeholder;
    },
    align: 'center',
    draggable: false,
    resizable: false
}

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