Как использовать XTemplate с ajax?
Всем привет. Нужна ваша помощь, друзья. Тому кто меня спасёт — донейшн закину.
Делаю дополнение небольшое, на базе modExtra от Василия. Сейчас столкнулся с одной трудностью, которую никак не могу решить.
Помимо данных, которые хранятся в БД, мне нужно на отдельно вкладке вывести данные с стороннего API. Это будет происходить на отдельном табе. И вот тут я теряюсь, т.к. extJS знаю крайне плохо.
Создаю таб, для него указываю xtype, пусть будет api-card. В файле api-card.js делаю ajax запрос на файл, он отдаёт json, в нём куча данных. Как мне эти данные вывести в собственном XTemplate?
По отдельности представляю как это работает, а вот вместе — хоть убей.
Нашёл пример, но чего-то не могу додуматься, как мне вот это под админкой запустить.
Делаю дополнение небольшое, на базе 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. по итогу хочу получить нечто вроде бутстраповской сетки Контент Комментарии: 4
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 добавляю:
А в item.card.js как мне это запилить? Я сколько читаю, не могу понять логику, как мне это собрать в одно целое.
Или я совсем неправильно думаю, и мне не нужно даже новый файл записывать, достаточно прямо в выводе таба это указать? Вот например:
Смотрите.
В 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
}
}
});
},
}]
},
Извините, не располагаю свободным временем для обширных пояснений по коду…
Нашёл у вас на гитхабе пример идеальный =) Всё ясно и просто, как солнечный день. Спасибо за уделённое время и что дали направление, искал по гитхабу «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);
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.