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

I have a table with 2 column opening in popup window. Each cell should contain html response data from specific ajax call

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();

below 1 ajax call

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) {}

        });
    },

Any idea how to display the html inside each cell?

Thanks

You can't attach Ajax method as html if this method is asynchronous.

First method:

You can add parameter async as false to Ext.Ajax to change method to synchronous (which is not recommended) and return proper 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;
}

Second method:

You can use component loader to set content from external url:

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

Example of usage:

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
                    }
                }]