我正在尝试创建一个视图,它基本上有一个列表,其中每行有文本,右边有2个按钮。按钮的文本将始终相同 - 只需要从商店中提取行的文本。
我看到了这个question,但无法使提议的solution生效。我的商店里肯定有记录,但数据视图没有显示。
我的代码的简化版本:
我的主要观点:
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'
}
});
的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...
基本上像this。
我现在看到了标签,但我仍然坚持如何在那里获得一个按钮。由于我不想将其链接到商店,我不想将其放在dataMap
中。我试过把它放在items
中,但无济于事。
编辑2:
好吧,让按钮显示比我想象的要容易。这只是我对标签所做的重复,但没有将其包含在dataMap中 - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...
我需要解决的最后一个问题是,如何唯一地识别它们。我想在按钮上有一个监听器,但不知何故将记录传递给处理程序。
答案 0 :(得分:0)
我在数据视图中获取按钮而不将其链接到商店的解决方案。实际上,有点不出所料,与blog post类似。
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
}
在我的数据视图中:
...
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);
...
}
}
}
...