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

Question

我有一个 table 在弹出窗口 window 中打开了 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 作为 false 添加到 Ext.Ajax 以将方法更改为同步（不推荐）和 return 正确 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;
}

第二种方法：

您可以使用 component loader 从外部设置内容 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
                    }
                }]

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

extjs 6.2 Render html in table cell based on ajax response data

extjs

extjs6.2