Отображение кнопок в Dataview в Sencha 2

Question

Я пытаюсь создать вид, который по сути имеет список, в котором каждая строка имеет текст и 2 кнопки выровнены по правому краю. Текст кнопок всегда будет одинаковым - в магазине нужно будет извлечь только текст строки.

Я видел этот вопрос, но не смог заставить предложенное решение работать. У меня определенно есть записи в моем магазине, но данные не отображаются.

Упрощенная версия моего кода:

Мой основной вид:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    ...
    config: {
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'middle'
        },
        items: [
           ...
           {xtype: 'mylist'}
           ...
        ]
        ...
    }
    ...
});

DataView:

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.DataView',
    alias: 'widget.mylist',
    requires: ...,
    config: {
         useComponents: true,
         store: 'my-store',
         defaultType: 'listitem'
     }
});

DataItem:

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:
Ну, получить кнопку для отображения было проще, чем я думал. Это просто повторение того, что я сделал с меткой, но без включения ее в карту данных - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...

Последний вопрос, который мне нужно решить, - это как их однозначно идентифицировать. Я хочу, чтобы слушатель был на кнопке, но каким-то образом передал запись в обработчик.

Answer 1

Мое решение для получения кнопки в виде данных без привязки ее к магазину. Это на самом деле, что неудивительно, похоже на этот пост в блоге.

view - ListItem.js

...
config: {
    layout: {
       type: 'hbox',
       align: 'center'
    },
    dataMap: {
        getDescription: {
            setHtml: 'description'
        }
    },
    description: {
        cls: ...,
        flex: 4
    },
    myButton: {
        cls: ...,
        text: 'Button!',
        flex: 1
    }
},
applyDescription, updateDescription (same as in the question),
applyMyButton: function(config) {
    return Ext.factory(config, Ext.Button, this.getMyButton());
},
updateMyButton: function(newButton, oldButton) {
    ... same logic as the other update method
}

В моем dataview:

...
config: {
    itemId: ...,
    store: ...,
    useComponents: true,
    defaultType: 'listitem',
    width: '100%',
    flex: 1,
    listeners: {
        itemtap: function(dataview, index, element, evt) {
            var store = dataview.getStore();
            var record = store.getAt(index);
            ...
        }
    }
}
...