Как использовать 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. по итогу хочу получить нечто вроде бутстраповской сетки Контент
Овчинников Егор Эдуардович
Овчинников Егор Эдуардович
24 января 2018, 23:13
modx.pro
1
1 168
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('');
        }
    }
),
    Овчинников Егор Эдуардович
    Овчинников Егор Эдуардович
    25 января 2018, 11:05
    0
    Владимир, спасибо за ответ. Можно несколько уточнений, если вы не против?

    Смотрите.
    В 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
      Извините, не располагаю свободным временем для обширных пояснений по коду…
        Овчинников Егор Эдуардович
        Овчинников Егор Эдуардович
        25 января 2018, 23:08
        +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