Do I have two instances of the same store? - store

Question

i populate a listview using a store with jsonp proxy that sends a GET request to my server. when the app launches the request is send and the list items are rendered with the response as they should. now when i then manually add a new item in my data-base server and refresh the list with the code shown in the controller below and inspect the store object in the console i can see that the newly created item is in the store data. so far so good, everything as expected. however, the new item is not in the refreshed in the list. the strange thing is that when i inspect the list object and its containing store object the newly created item is not included. However when i relaunch the app (rather than reload the store and refresh the list) new newly created item appears in the list. to me it seems that somehow i have 2 store instances, one with the new data (which i retreive with Ext.getStore) and one without (the one inside the listview) which i thought should be actually the same. how is that possible? below i show you how i do the thing. Any help is greatly appreciated.
the controller
Ext.define('VB1.controller.ListController', {
extend: 'Ext.app.Controller',
config: {
refs: {
listView: 'listview',
refreshButtonTap: '#refreshbutton',
},
control: {
refreshButtonTap: {
onRefreshList: 'refreshList',
},
}
},
launch: function () {
this.callParent(arguments);
Ext.getStore('MyStore').addListener('load', 'recordLoaded', this);
},
refreshList: function () {
var loadedStore = Ext.getStore('MyStore').load();
console.log(loadedStore) //here the new item is included
},
recordLoaded: function () {
var list = this.getListView();
list.refresh();
console.log(list) //here the new item is not included in the store object inside
//listobject
}
});
the Store
Ext.define('VB1.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'widget.mystore',
config: {
model: 'VB1.model.MyModel',
autoLoad: true,
proxy: {
type: 'jsonp',
url : 'myUrl.js',
enablePagingParams: false,
reader: {
type: 'json',
rootProperty: 'array.resources'
},
},
},
});
the listview
Ext.define('VB1.view.ListView', {
extend: 'Ext.dataview.List',
alias: 'widget.listview',
requires: [
'Ext.dataview.List',
],
scrollable: 'vertical',
config: {
loadingText: "loading...",
emptyText: '</pre><div class="notes-list-empty-text">No notes found.</div><pre>',
itemTpl: '</pre><div class="list-item-title">{title}</div><div class="list-item-narrative"><img src="{listlogo}"/></div><pre>',
},
listeners: {
itemtap: function(list, index, item, record) {
this.fireEvent('showDetails', record, this);
}
},
});
this is how i add the list including the store to the viewport at app launch
var listView = {
xtype: 'listview',
store: {xtype: 'mystore'},
}
Ext.Viewport.add(listView);

Answer 1

I just found out what the problem was. first of all the store was instantiated 2 times as I suspected. obviously one time by the app and another time by the view. hence i ended up with having two stores. since i did not set a storeID the stores became identified by two unique ids based on the xtype name i have given in the alias config of the store.
the store i resolved and logged in the controller like below had the id ex-mystore-1
var loadedStore = Ext.getStore('MyStore').load();
console.log(loadedStore) //here the new item was included
and the store inside the list view object got the id ext-mystore-2
var list = this.getListView();
console.log(list._store); //here the new item was not included
what changed the hole problem in my favor was when i added a storeId to the store. after that i still had two stores, however, with the same storeIds (but with with different unique or observable ids). the good new was that now the new item was included in both store instances. i also was able to get rid of the second store instance by not instantiating the xtype of the store in the listview but reference it by storeID. Now everything works as it should. thanks to anybody who looked at this. i hope this helpes somebody who finds similar trouble.