extjs 6.5 modern で書かれた次のテスト コードを考えてみてください。
Ext.define('myApp.store.Sections', {
extend: 'Ext.data.Store',
storeId: 'Sections',
alias: 'store.sections',
fields: ['name', 'event'],
data: {
items: [{
name: 'blah',
event: 'a'
}, {
name: 'hello',
event: 'a'
}, {
name: 'world',
event: 'a'
}, {
name: 'foo',
event: 'b'
}, {
name: 'bar',
event: 'b'
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create({
xtype: 'container',
title: 'Panel Title',
iconCls: 'x-fa fa-html5',
height: 400,
width: 400,
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
name: 'master',
store: {
type: 'sections',
},
layout: 'fit',
flex: 1,
plugins: {
gridcellediting: {
selectOnEdit: true,
triggerEvent: 'tap',
}
},
columns: [{
text: 'name',
dataIndex: 'name',
flex: 1,
editor: {
xtype: 'textfield',
}
}]
}, {
xtype: 'grid',
name: 'firstslave',
store: {
type: 'sections',
},
layout: 'fit',
flex: 1,
columns: [{
text: 'name',
dataIndex: 'name',
flex: 1
}]
}, {
xtype: 'combobox',
name: 'secondslave',
displayField: 'name',
valueField: 'name',
store: {
type: 'sections'
}
}]
});
最初のグリッドからストア エントリを変更できます。ストアがこのように変更された場合、変更はコンボボックス (2 番目のスレーブ) 内に表示されます。
ただし、2 番目のグリッドはこれらの変更を反映していません。項目は同じままであるため、グリッドビューは基になるデータと同期していません。
なぜこれが起こるのですか?これを防ぐことはできますか?
編集: (列メニューを使用して) グリッドを並べ替えると、項目が更新されることに気付きました。