CODEWITHSUNDEEP
javascriptextjssencha-touchsencha-touch-2
Ronnie
Ronnie

Reputation: 11198

Display JSON from sencha data store

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

Answers (4)

Nico Grunfeld
Nico Grunfeld

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

Bogdan Dumitriu
Bogdan Dumitriu

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

Towler
Towler

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

Evan Trimboli
Evan Trimboli

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

Related Questions