extjs - extjs 6.2 根据 ajax 响应数据在表格单元格中呈现 html

Question

我有一个在弹出窗口中打开 2 列的表格。每个单元格应包含来自特定 ajax 调用的 html 响应数据

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: [{
                    html:this.imageVersion1()
                }, {
                    html:this.imageVersion2()
                }]
            }
        }).show();

低于 1 个 ajax 调用

imageVersion1: function (grid, rowIndex, event) {
        Ext.Ajax.request({
            url: "/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
            method: "GET",
            success: function(response,opts) {
                var objimg1 = response.responseText;

                objimg1

            },
            failure: function(response) {}

        });
    },

知道如何在每个单元格中显示 html 吗？

谢谢

Answer 1

如果此方法是异步的，则不能附加Ajax method为 html。

第一种方法：

async您可以为Ext.Ajax添加参数false以将方法更改为同步（不推荐）并返回正确的 html

imageVersion1: function (grid, rowIndex, event) {
        var objimg1 = "";
        Ext.Ajax.request({
            async: false,
            url: "/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
            method: "GET",
            success: function(response,opts) {
                objimg1 = response.responseText;
            },
            failure: function(response) {}
        });
        return objimg1;
}

第二种方法：

您可以使用组件加载器从外部 url 设置内容：

{
     xtype:'box',
     loader: {
          url:"/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
          autoLoad: true
     }  
}  

使用示例：

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: [{
                    xtype:'box',
                    loader: {
                        url:"/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
                        autoLoad: true
                    }
                }, {
                    xtype:'box',
                    loader: {
                        url:"/admin/asset/show-version?id=11458&csrfToken=679f2ba5e09c237c4ef98a6585f44a45c2875ece",
                        autoLoad: true
                    }
                }]