Я пытаюсь создать представление, в котором есть список, в котором каждая строка имеет текст и две кнопки, выровненные по правому краю. Текст кнопок всегда будет одним и тем же — из хранилища нужно будет получить только текст строки.
Я видел этот вопрос, но не смог предлагаемое решение не работает. У меня определенно есть записи в моем магазине, но представление данных не отображается.
Упрощенная версия моего кода:
Мое основное представление:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
...
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [
...
{xtype: 'mylist'}
...
]
...
}
...
});
Просмотр данных:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.DataView',
alias: 'widget.mylist',
requires: ...,
config: {
useComponents: true,
store: 'my-store',
defaultType: 'listitem'
}
});
Элемент данных:
Ext.define('MyApp.view.ListItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.listitem',
config: {
layout: ...
items: [{
xtype: 'component',
itemId: 'description',
html: '',
flex: 2
},
{
xtype: 'button',
text: 'a button',
itemId: ...,
flex: ...
},
{
... another button
}]
},
updateRecord: function(record) {
...
this.down('#description').setHtml(record.get('description'));
// record.get('description') does give me an undefined value
}
});
Если предположить, что мои магазины и модели настроены правильно, в чем может быть проблема?
В качестве альтернативы, возможно, мне следует просто использовать стандартный список, но установить ширину ‹100% и просто добавить 2 кнопки справа для каждой строки. Хотя я бы предпочел использовать текущий подход к работе...
Редактировать:
В итоге был использован подход dataMap. Мой DataItem теперь выглядит так:
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
flex: 1
}
},
applyDescription: function(config) {
return Ext.factory(config, Ext.Component, this.getDescription());
},
updateDescription...
По сути, как это.
Теперь я вижу ярлыки, но не могу понять, как вставить туда кнопку. Поскольку я не хочу связывать его с магазином, я не хочу помещать его в dataMap. Я пытался поставить его в items, но безрезультатно.
Правка 2.
Что ж, сделать так, чтобы кнопка отображалась, оказалось проще, чем я думал. Это просто повтор того, что я сделал с меткой, но без включения в dataMap - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...
Последний вопрос, который мне нужно решить, это как их однозначно идентифицировать. Я хочу прослушиватель на кнопке, но каким-то образом передать запись в обработчик.
