我正在尝试创建一个视图,该视图本质上是一个列表,其中每一行都有文本和 2 个右对齐的按钮。按钮的文本将始终相同 - 只有行的文本需要从存储中获取。
我看到了这个问题,但无法使建议的解决方案发挥作用。我的商店里肯定有记录,但数据视图没有显示。
我的代码的简化版本:
我的主要观点:
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(){...}...
我需要解决的最后一个问题是,如何唯一标识它们。我想要按钮上的侦听器,但以某种方式将记录传递给处理程序。