PDA

View Full Version : How to update store records before shown in list



Fredde
18 Jul 2011, 6:28 PM
I populate a Store with a server call. I then calculate a new value for each records and add it to the record. I do this in the Load event of the Store.


App.stores.StationStore = new Ext.data.Store({
model: 'Station',
proxy: {
type: 'ajax',
url : 'getStations.php',
reader: {
type: 'json',
root: 'station'
},
},
listeners: {
load: function(store, recs) {
console.log("Load event triggered");
var myLocation = {coords: {latitude: 51, longitude: -0.17}};
for (var i = recs.length - 1; i >= 0; i--){
recs[i].data.distance = Math.round(calc_distance(myLocation, recs[i].data)*10)/10;
store.sync();
};

}
},
});

The data in the Store is displayed in the List but the initComponent of the List completes before the Lad event finishes. The udated/populated field is left blank in the the list template even if the data is there. When I tap down to the Detail view the data shows up without a problem.

1. How/where do I tweak my Store data so that it gets displayed?

If I make changes to the Store data via the console the List does not reflect that either. I thought all changes to the records in the Store automatically pushed through to the GUI.


App.views.StationList = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Freddy Biker',
dock: 'top',
}],
items: [{
xtype: 'list',
emptyText: 'No data available.',
store: App.stores.StationStore,
itemTpl: '<span class="name">{name} ({distance} km)</span> <span class="secondary">{nbBikes} free</span>',
onItemDisclosure: function (record) {
Ext.dispatch({
controller: App.controllers.Home,
action: 'showDetail',
data: record.data
});
},
grouped: false,
scroll: 'vertical',
fullscreen: true
}],
initComponent: function() {

console.log("StationList initComponent");
App.views.StationList.superclass.initComponent.apply(this, arguments);
}
});

arihant0073
22 Nov 2011, 10:39 AM
regards,
Arihant

Fredde
22 Nov 2011, 11:14 AM
Nope sorry! I ended up not using the MVC framework which was much faster and easier for my needs.

calebf
19 Dec 2011, 3:22 PM
I'm having a similar problem while testing the example MVC application given here:

http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

Everything has worked great up until I tried to add rows to the grid. I changed this portion:



Ext.define (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext-method-define)('AM.store.Users', {

extend: 'Ext.data.Store (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.Store)',
fields: ['name', 'email'],
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
});

To This:



Ext.define (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext-method-define)('AM.store.Users', {
extend: 'Ext.data.Store (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.Store)',
fields: ['name', 'email'],
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Caleb', email: 'caleb@sencha.com'}
]
});

But the 3rd email address doesn't show on the grid no matter what I do. I have tried disabling cache, cookies, clearing all browser info. I then tried creating a new store under a different name and switching to that store. The first 2 email addresses are still all that show. I tried adding/removing email addresses, changing the order of the rows, adding another column, even removing the data so it's a null set. Still renders the same 2 email addresses even after clearing cache and cookies. It makes no sense... The grid only failed to render when I deleted the actual store file.

The MVC framework seems to be very powerful, but this is making me wary.