基本的に、各行にテキストと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(){...}...
私が解決する必要がある最後の問題は、それらを一意に識別する方法です。ボタンにリスナーが必要ですが、どうにかしてレコードをハンドラーに渡します。