extjs 6.2 Рендеринг html в ячейку таблицы на основе данных ответа ajax - PullRequest
Новая
       47

extjs 6.2 Рендеринг html в ячейку таблицы на основе данных ответа ajax

0 голосов
/ 09 апреля 2019

У меня есть таблица с открытием 2 столбцов во всплывающем окне. Каждая ячейка должна содержать данные ответа html от определенного вызова ajax 

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 внутри каждой ячейки?

Спасибо

1 Ответ

0 голосов
/ 09 апреля 2019

Вы не можете прикрепить 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;
}

Второй метод:

Вы можете использовать загрузчик компонентов для установки содержимого с внешнего 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
                    }
                }]
...