List component not displaying data from store

[parky128]

I got a weird issue where a list component in my app is not displaying data from the store its bound to, the list component is rendering the correct number of rows, so I wonder if I have missed something with my field mappings or something similar somwhere.

I have set up my store like so:


Ext.regModel('Vehicle', {
fields: [
{name: 'untID', type: 'int'},
{name: 'untName', type: 'string'}
]
});

this.TrackingListStore=new Ext.data.Store({
storeId: 'TrackingListStore',
model: 'Vehicle'

});

You will notice I have not confgured a proxy on the store above. This is because I am manually loading in the data elsewhere in the application just through the use of loadData(), I am passing in the following array data:


[[8202,"A13 KCT"],[8201,"A15 KCT"],[8203,"A16 KCT"],[8205,"A18 KCT"],[8200,"A19 KCT"],[8468,"Coach BF60 OFD (906)"],[8469,"EC350389831767135"],[8458,"EC350389835720106"],[8007,"EC350389837573297"],[8169,"ET352929010020026"]]

I am following the same approach as how Ext designer splits out the ui and base functionality into separate classes, so my main ui file for my list component looks like the following:


SBS.Websites.PPMobi.VehicleListUi = Ext.extend(Ext.List, {
store: 'TrackingListStore',
itemTpl: '<div>{untID} - {untName}</div>',
singleSelect: true,
initComponent: function() {

SBS.Websites.PPMobi.VehicleListUi.superclass.initComponent.call(this);
}

});

This list component is an item of a tabpanel like so:


SBS.Websites.PPMobi.Tabpanel = Ext.extend(Ext.TabPanel, {
appHub: null,
fullscreen: true,
ui : 'light',
sortable : true,
items: [
{
title: 'Vehicles',
ui: 'light',
cls : 'card1',
items: [{
xtype: 'vehiclelist'
}]
},
{
title: 'Map',
ui: 'light',
layout: 'fit',
items: [{
xtype: 'map'
}]
},
],
dockedItems: [{
xtype: 'toolbar',
title: 'www.pinpointers.mobi',
dock: 'top',
items: [{
text: 'Logout',
ui: 'light',
handler: function(){
this.appHub.wsClient.EndSession();
},
scope: this
}]
}],
initComponent: function() {
}


});

All I end up with is just the dashes as defined in the itemTpl config for my list component above, but nothing for the untID and untName placeholders. I don't get it, I have stepped through my code and can see my store is loading and can inspect the items collection after it has loaded and can see the records there.

Anyone got any clues for me as to why my list doesn't display the data I am expecting to see?

[realjax]

Again.. why extending?

From the code you posted I can't see you registering the xtypes anywhere?

[parky128]

Sorry forgot to add the base class code for my list component too, you will see the xtype:


SBS.Websites.PPMobi.VehicleList = Ext.extend(SBS.Websites.PPMobi.VehicleListUi, {

initComponent: function() {
//Custom code here...

}
});
Ext.reg('vehiclelist', SBS.Websites.PPMobi.VehicleList);

I am extending just becuase i like to keep the code separated, and I am just used to using Ext Designer which generates the code in this manner too.

In the code above I need to listen out for events so I can react and perform custom functionality.

So any ideas why my list wont display the data from my store correctly?

Thanks

[parky128]

I have debugged through my code again and after inspecting the records in my store I see that the data properties for each of these dont appear to be correct objects. In Chrome when looking at these records, the data appears as follows:



Ext.getStore('TrackingListStore').data: Ext.util.MixedCollection

allowFunctions: false
events: Object
getKey: function (record) {
items: Array[50]

0: subclass

data: Object

8202,A13 KCT: undefined
__proto__: Object

dirty: false
events: Object
internalId: "ext-record-2"
modified: Object
needsAdd: false
phantom: true
store: Ext.data.Store.Ext.extend.constructor
__proto__: F

1: subclass
2: subclass
3: subclass





From using ExtJS I am used to seeing somethig more along the lines of:



data: Object

untID: 8202
untName: A13 KCT




Is this why my list is not loading in the data from my store, as the template definition is unable to find these field values in my store?

I thought my model definition would have taken care of this, unless I am missing the point here!?

[realjax]

Try loading this dataset :

[{untID: 8202,untName:"A13 KCT"},{untID:8201,untName="A15 KCT"}]

[parky128]

OK,

I have that working with hard coded data in that format, but I need to be able to consume an object in the form below which I cant change server side:


[[8202,"A13 KCT"],[8201,"A15 KCT"],[8203,"A16 KCT"],[8205,"A18 KCT"],[8200,"A19 KCT"],[8468,"Coach BF60 OFD (906)"],[8469,"EC350389831767135"],[8458,"EC350389835720106"],[8007,"EC350389837573297"],[8169,"ET352929010020026"]]

I have tried using an ArrayStore in place of the generic Store object in my code using the same model definition but when I look at my store in Chrome, I see the same as before:



TrackingListStore: Ext.data.ArrayStore.Ext.extend.constructor

data: Ext.util.MixedCollection

allowFunctions: false
events: Object
getKey: function (record) {
items: Array[50]

0: subclass

data: Object

8202,A13 KCT: undefined
__proto__: Object

dirty: false
events: Object
internalId: "ext-record-2"
modified: Object
needsAdd: false
phantom: true
store: Ext.data.ArrayStore.Ext.extend.constructor
__proto__: F

1: subclass
2: subclass
3: subclass
4: subclass
5: subclass






So still no proper key\value pairings for the data object in my records.

Can you help?

[realjax]

> Can you help?

Probably not. It seems things have changed in this repect with Sencha Touch as opposed to Extjs. But if you can't change it server side, change it on the client.. A simple loop and you are all set.