List is empty when loading page - sencha-touch

Question

Im trying to load data into a list using a store. When i run my code the list value is blank, the list is not empty but it is blank.
Here is the part of my controller where i try to add data to store.
var loginStore = Ext.getStore('instance');
var record = [{id:id, issued_at:issued, instance_url:instance, signature:sig, access_token:access, myBaseUri:baseUri}];
loginStore.add(record);
Here is the part of the view where i make the list
{
xtype :'list',
id : 'list1',
loadingText: 'Loading Projects',
emptyText: '<div>No Projects Found</div>',
onItemDisclosure: true,
itemTpl: '<div>{issued_at}</div>',
height: 320,
store : 'instance'
}
This doesnt work but when i replace itemTpl:'<div>{issued_at}</div>' with
itemTpl:'<div>{id}</div>'
it seems to work. What am I doing wrong?
Here is my store:
Ext.define('GS.store.instance',{
extend: 'Ext.data.Store',
requires: ['GS.model.login'],
config:{
model: 'GS.model.login'
}
});
And here is my model:
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'string'},
{name: 'issued_at', type:'string'},
{name: 'instance_url', type:'string'},
{name: 'signature', type:'string'},
{name: 'access_token', type:'string'},
{name: 'myBaseUri', type:'string'}
]
});

Answer 1

The way you create your record is wrong. Try this way :
var record = Ext.create('YOUR_MODEL', {
id : id,
issued_at: issued,
instance_url: instance,
...
});
Hope this helps.

Answer 2

Try it using this example:
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
});

Answer 3

As you get values in the list when using id instead of issued_at, the problem seems to be, not with the functions/models/store so much, but with the issued_at variable itself. Are you certain it's getting through to the store?
Try adding this when your store has loaded, or run it in the browser using for instance chrome
console.log(Ext.getStore("instance").getAt(0).data.id);
console.log(Ext.getStore("instance").getAt(0).data.issued_at);
You should see some result from your first data item.
If you get an id but just "undefined" for issued_at, you'll know that the issue is with the records. And in that case I would try to log your issued variable before you try to add it to the store to make sure that it is actually defined.
Please report with results for further help/discussions if needed.

Answer 4

It turns out that i was missing the config option on my model definition.
Ext.define('GS.model.login',{
extend: 'Ext.data.Model',
config:{
fields:[ 'id','issued_at','instance_url','signature','access_token','myBaseUri' ]
}
});