ExtJS 6.2：如何在弹窗表格单元格渲染Ajax返回的HTML

Hey there, let's sort out this issue—your core problem is that Ajax requests are asynchronous, so when you call this.imageVersion1() directly in the window's items config, the function finishes running before the Ajax response comes back, leaving your cells empty. Here's a straightforward, working solution to populate those table cells with the loaded HTML:

Step 1: Refactor the Window to Use Placeholders First #

Instead of trying to inject HTML on window creation, set up empty/loading placeholder components, store references to them, then trigger the Ajax requests to fill them in:

// Create the window and define placeholder cells
var versionCompareWindow = Ext.create('Ext.window.Window', {
    title: t('compare_image_version'),
    height: 600,
    width: 1170,
    layout: 'fit',
    autoScroll: true,
    bodyStyle: 'padding:20px 5px 20px 5px;',
    items: {
        title: 'Table Layout',
        layout: { type: 'table', columns: 2 },
        defaults: { bodyStyle: 'padding:20px' },
        items: [
            // Placeholder for version 1 - we'll update this later
            { html: '<p>Loading version 1...</p>', itemId: 'version1Cell' },
            // Placeholder for version 2
            { html: '<p>Loading version 2...</p>', itemId: 'version2Cell' }
        ]
    }
});

// Show the window first so users see the loading state
versionCompareWindow.show();

// Trigger the Ajax requests to populate each cell
this.imageVersion1(versionCompareWindow);
this.imageVersion2(versionCompareWindow);

Step 2: Update Ajax Methods to Target Cells #

Modify your imageVersion1 and imageVersion2 functions to accept the window reference, then use it to find the target cell and update its content when the request succeeds:

imageVersion1: function(windowRef) {
    Ext.Ajax.request({
        url: "/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
        method: "GET",
        success: function(response, opts) {
            // Locate the version 1 cell and inject the loaded HTML
            var targetCell = windowRef.down('#version1Cell');
            if (targetCell) {
                targetCell.update(response.responseText);
            }
        },
        failure: function(response) {
            // Handle errors gracefully instead of leaving users hanging
            var targetCell = windowRef.down('#version1Cell');
            if (targetCell) {
                targetCell.update('<p>Failed to load version 1. Please try again.</p>');
            }
        }
    });
},

// Repeat the pattern for version 2 (adjust URL and itemId)
imageVersion2: function(windowRef) {
    Ext.Ajax.request({
        url: "/admin/asset/show-version?id=YOUR_VERSION_2_ID&csrfToken=YOUR_CSRF_TOKEN",
        method: "GET",
        success: function(response, opts) {
            var targetCell = windowRef.down('#version2Cell');
            if (targetCell) {
                targetCell.update(response.responseText);
            }
        },
        failure: function(response) {
            var targetCell = windowRef.down('#version2Cell');
            if (targetCell) {
                targetCell.update('<p>Failed to load version 2. Please try again.</p>');
            }
        }
    });
}

Quick Key Notes: #

• Async Awareness: Ajax calls don't block code execution, so we can't return HTML directly from the imageVersion functions—we have to wait for the success callback to update the component.
• Component Targeting: Using itemId and down() lets us safely find the correct cell inside the window without hardcoding component references.
• Error Handling: Adding failure cases ensures users get clear feedback if a request fails, instead of seeing a permanent "Loading..." message.
• CSRF Token Best Practice: Hardcoding the CSRF token isn't ideal—pull it dynamically from a hidden page input or Ext's global config to avoid issues if the token refreshes.

内容的提问来源于stack exchange，提问作者Jam.k