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

Question

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

Я видел это question, но не смог получить предложенный solution для работы. У меня определенно есть записи в моем магазине, но dataview не отображается.

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

Мой главный вид:

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% и просто добавить две кнопки справа для каждой строки. Хотя я предпочел бы получить текущий подход к работе ...

Edit:
Законченное использованием 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... 

В принципе, как this.

Я вижу ярлыки сейчас, но я застрял на том, как получить кнопку там. Поскольку я не хочу связывать его с магазином, я не хочу помещать его в dataMap. Я попытался положить его в items, но безрезультатно.

Edit 2:
Ну, получить кнопку, чтобы отобразить было проще, чем я думал. Это просто повторение того, что я сделал с ярлыком, но без его включения в dataMap - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...

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

Answer 1

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

вид - 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); 
      ... 
     } 
    } 
} 
...