Как использовать XTemplate с ajax?

Всем привет. Нужна ваша помощь, друзья. Тому кто меня спасёт — донейшн закину.
Делаю дополнение небольшое, на базе modExtra от Василия. Сейчас столкнулся с одной трудностью, которую никак не могу решить.
Помимо данных, которые хранятся в БД, мне нужно на отдельно вкладке вывести данные с стороннего API. Это будет происходить на отдельном табе. И вот тут я теряюсь, т.к. extJS знаю крайне плохо.

Создаю таб, для него указываю xtype, пусть будет api-card. В файле api-card.js делаю ajax запрос на файл, он отдаёт json, в нём куча данных. Как мне эти данные вывести в собственном XTemplate?

По отдельности представляю как это работает, а вот вместе — хоть убей.

Нашёл пример, но чего-то не могу додуматься, как мне вот это под админкой запустить.
Ext.onReady(function(){
    var tpl = new Ext.XTemplate
        ('<h1>Rate</h1>',
        '<table>',
        '<tr>',
        '<td>Позиция на Ноябрь 2012</td>',
        '<td>Язык программирования</td>',
        '<td>Рейтинг</td>',
        '</tr>',
        '<tpl for=".">',
            '<tr>',
            '<td>{position}</td>',
            '<td>{title}</td>',
            '<td>{rate}</td>',
            '</tr>',
        '</tpl>',
        '</table>');                          
tpl.overwrite(Ext.getBody(), tiobeData);
});
p.s. по итогу хочу получить нечто вроде бутстраповской сетки Контент
Овчинников Егор Эдуардович
modx.pro
1
1 151
0

Комментарии: 4

Володя
25 января 2018, 10:11
+1
tpl: new Ext.XTemplate(
    '<tpl for=".">',

    '<table class="msoptionsprice-expander"><tbody>',

    '<tpl if="name">',
    '<tr>',
    '<td>',
    '<strong>{name}</strong>',
    '</td>',
    '</tr>',
    '</tpl>',

    '<tpl if="values">',
    '<tr>',
    '<td>',
    '{values:this.renderValues}',
    '</td>',
    '</tr>',
    '</tpl>',
    
    ' </tbody></table>',

    '</tpl>',
    {
        compiled: true,
        renderValues: function (value, record) {
            var values = [];
            ///
            return values.join('');
        }
    }
),
    Владимир, спасибо за ответ. Можно несколько уточнений, если вы не против?

    Смотрите.
    В home.panel.js добавляю:

    {
       xtype: 'modExtra-item-card'
       ,cls: 'main-wrapper'
        ,preventRender: true
     }
    Тут я получаю, что у моего нового таба в содержимом выводится нужный xtype, окей, всё хорошо.

    А в item.card.js как мне это запилить? Я сколько читаю, не могу понять логику, как мне это собрать в одно целое.

    Или я совсем неправильно думаю, и мне не нужно даже новый файл записывать, достаточно прямо в выводе таба это указать? Вот например:

    {
        title: 'Название новой вкладки'
        ,defaults: { autoHeight: true }
        ,items: [{
            xtype: 'xtemplate',
            ,border: false
            ,cls: 'panel-desc'
            ,handler: function() {
                MODx.Ajax.request({
                    url: MODx.config.connector_url, 
                    params: { 
                        action: 'resource/getlist',
                    },
                    listeners: {
                        success: { 
                           //тут как-то вывести xtemplate
                        }
                    }
                });
            },
        }]
    },
      Володя
      25 января 2018, 21:14
      +1
      Извините, не располагаю свободным временем для обширных пояснений по коду…
        Нашёл у вас на гитхабе пример идеальный =) Всё ясно и просто, как солнечный день. Спасибо за уделённое время и что дали направление, искал по гитхабу «tpl: new Ext.XTemplate» и разобрался уже по коду =)

        Может кому пригодится тоже:
        miniShop2.combo.Product = function (config) {
            config = config || {};
            Ext.applyIf(config, {
                id: 'minishop2-combo-product',
                fieldLabel: _('ms2_product_name'),
                fields: ['id', 'pagetitle', 'parents'],
                valueField: 'id',
                displayField: 'pagetitle',
                name: 'product',
                hiddenName: 'product',
                allowBlank: false,
                url: miniShop2.config['connector_url'],
                baseParams: {
                    action: 'mgr/product/getlist',
                    combo: true,
                    id: config.value
                },
                tpl: new Ext.XTemplate('\
                    <tpl for=".">\
                        <div class="x-combo-list-item minishop2-product-list-item" ext:qtip="{pagetitle}">\
                            <tpl if="parents">\
                                <span class="parents">\
                                    <tpl for="parents">\
                                        <nobr><small>{pagetitle} / </small></nobr>\
                                    </tpl>\
                                </span>
        \
                            </tpl>\
                            <span><small>({id})</small> <b>{pagetitle}</b></span>\
                        </div>\
                    </tpl>', {compiled: true}
                ),
                pageSize: 5,
                emptyText: _('ms2_combo_select'),
                editable: true,
            });
            miniShop2.combo.Product.superclass.constructor.call(this, config);
        };
        Ext.extend(miniShop2.combo.Product, MODx.combo.ComboBox);
        Ext.reg('minishop2-combo-product', miniShop2.combo.Product);
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    4