Reputation: 11198
I've searched and I can see this has been asked quite a few times, but I cant even figure out how to do a simple console.log
on the data.
My store:
Ext.define('AventosPlanningTool.store.Aventos', {
extend:'Ext.data.Store',
config:
{
model:'AventosPlanningTool.model.Aventos',
proxy:
{
type:'ajax',
url:'resources/json/frames.json',
reader:
{
type:'json',
rootProperty:'options'
}
},
autoLoad: true
}
});
I can see in my network tab that the JSON file IS loading. I cannot figure out what to do with it at this point. In the data store, I've set the model to AventosPlanningTool.model.Aventos
which is the file below.
Ext.define('AventosPlanningTool.model.Aventos', {
extend:'Ext.data.Model',
xtype:'AventosModel',
config:
{
fields: [
'name',
'image'
]
}
});
My JSON is pretty simple right now:
{
"name": "Cabinet Type",
"options": [
{
"name": "Face Frame",
"image": "resources/images/aventos/frames/faceframe.png"
},
{
"name": "Panel",
"image": "resources/images/aventos/frames/panel.png"
}
]
}
Even if I can do a console.log
on the data that would be very helpful. I can't figure out how to use the data. I've checked both guides in the docs: http://docs-origin.sencha.com/touch/2.2.1/#!/guide/models, http://docs-origin.sencha.com/touch/2.2.1/#!/guide/stores and I just can't grasp it
Upvotes: 1
Views: 1088
Reputation: 1133
Add a load listener to your store:
Ext.define('AventosPlanningTool.store.Aventos', {
extend:'Ext.data.Store',
config: {
model:'AventosPlanningTool.model.Aventos',
proxy: {
type:'ajax',
url:'resources/json/frames.json',
reader: {
type:'json',
rootProperty:'options'
}
},
autoLoad: true,
listeners: {
load: function(st, g, s, o, opts) {
st.each(function(record) {
console.log(record.get('name') + ' - ' + record.get('image'));
});
}
}
});
Upvotes: 1
Reputation: 51
In sencha, data is defined in models, and actually memorized in stores. You can load your JSON through a proxy. Think of the model as the tables from sql and the store as the actual data in tables. Now, if you want to get the data from your store and perform operations on it, you have to load the store. To fetch your data into a list, you define a list with xtype:'list' specify your store store:'yourStoreName' and provide a template for showing that data. Here's a very detailed explanation on what I tried to say.
http://docs-origin.sencha.com/touch/2.2.1/#!/api/Ext.data.Store also this: http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-2/
Upvotes: 1
Reputation: 1562
I think what you're missing is to listen for the 'load' event on the store.
store.on('load', function(thisStore, records) {
console.log(records[0].get('name'));
})
Upvotes: 0
Reputation: 30092
Look at the API docs for the data store. Note that you can only access the data once the store has been loaded. For example:
store.load();
store.getAt(0) // null, the store load hasn't completed yet.
You can loop over each record in the store using the each
method. You can get a record at a particular index using getAt
store.each(function(rec) {
console.log(rec.get('name'), rec.get('image'));
});
console.log(store.getAt(0).get('name'));
Often times you will bind the store to a list, there are plenty of examples of this in the API docs.
Upvotes: 0