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作为false添加到Ext.Ajax，以将方法更改为同步（不推荐）并返回适当的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响应数据在表单元格中呈现html

1 个答案: