macs
17 Apr 2012, 10:41 AM
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);
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);