いくつかのビュー (リスト、カルーセル、データビュー) に 1 つのストアを使用する場合があり、ストア データを更新 (ロード、フィルター) すると、このストアを使用するすべてのビューの DOM が再構築されますが、一部のビューは表示されません。これらのデータでは表示されない場合があります。更新を保存するたびにではなく、表示された場合にのみリストdomを更新するにはどうすればよいですか? 出題例
Ext.define("Test.view.Main", {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [ ]
},
constructor : function(){
this.callParent(arguments);
var store = Ext.create('Ext.data.Store',{
data :[
{title : 'One'},
{title : 'Two'},
{title : 'Three'}
]
}),
firstList = Ext.create('Ext.List',{
title : 'tab1',
store : store,
itemTpl : '{title}',
onItemDisclosure : function(){
store.add({title : 'Four'});
}
}),
secondList = Ext.create('Ext.List',{
title : 'tab2' ,
store : store,
itemTpl : '{title}'
}),
thirdList = Ext.create('Ext.List',{
title : 'tab3',
store : store,
itemTpl : '{title}'
});
this.add([
firstList,
secondList,
thirdList
]) ;
}
});
最初のリストのアイテムをタップすると、ストアに新しいアイテムが追加されます。そして、すべてのリストの DOM が変更されますが、2 番目と 3 番目のリストは表示されませんが、1 つのオプションが表示されます。メイン ストアを 1 つ作成し、ビューごとに個別のストアを作成します。ビュー ショーのときは、本店からストアを埋めます。しかし、それは良くありません。他のアイデアはありますか?