two instances of the same store?

[macs]

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 list is rendered with the response. when i then manually add a new item in the backend of my server (not via the api but webinterface) 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 also in the store data. however, the new item is not in the refreshed 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 reloud the store and refresh the list) new newly created item appears in the list. hence it seems that i have 2 store instances, one with the new data and one without. how is that possible? below i show you how i do the thing.

the controller


Ext.define('VB1.controller.ListController', {
extend: 'Ext.app.Controller',
config: {
refs: {
// We're going to lookup our view by xtype.
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 (record) {
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);

[mitchellsimoens]

When you add a record to the store, are you executing sync() to send any changes in the store to the backend?

[macs]

no

[macs]

no iam just adding a item in my backend from my desktop and do a refresh in the app. i mean i do not post anything from inside the app to my server. i add it directly in the webinterface

[mitchellsimoens]

This is why, when you load the store after the record isn't in the backend and you will loose it. You need to sync() the store so that your database can save that data.

[macs]

Sorry I am lost. the data is not lost. The data is in the backend, since i add it there. but the data i add in my backend does not appear in the list. it appears in the store though. hence when i refresh the new request is made, the response contains the new item, the new item is in the store (see above in the controller), but the new item is not in the list (also not in the store object inside the list(see code controller).

[macs]

when i relaunch the app (instead of load the store and refresh the list) for instance the new item is shown in the list

[macs]

sorry the title it should say "2 store instances"
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 helps anybody who finds themselves in similar trouble.