How to create Extjs Models and its association with other models

Question

Hello Everyone, I am new to EXTJS and want to grasp Extjs models and its complexity as per the json response. For Example I have a sample Json response for which I want to create a model

This is my app.js file

Ext.application({ requires: ['Ext.container.Viewport'], name: 'AM',

appFolder: 'app',

launch: function() {
    console.log('I am in app');
    var store = Ext.create('AM.store.ExampleStore');
    store.load();
    console.log('After Loading the records');
}

});

This is json sample

    [
        {
            "page": "0",
            "data": [
                {
                    "firstname": "puneet",
                    "id": "28170",
                    "lastname": "srivastava",
                    "area": "bangalore",
                    "profession": "Engineer"
                },
                {
                    "firstname": "v Durga",
                    "id": "28171",
                    "lastname": "Mallikrjuna",
                    "area": "bangalore",
                    "profession": "Extjs developer"
                }
            ]
        }
    ]

I created models as per my understanding. Model belongs to data part of json

Ext.define('AM.model.Example', {
    extend: 'Ext.data.Model',
    fields: ["firstname", "id", "lastname", "area", "profession"],
    belongsTo : 'AM.model.Page'
});

Ext.define('AM.model.Page', {
    extend: 'Ext.data.Model',
    fields: ["page", "data"],
    hasMany:{ model:"AM.model.Example", name: "example", associationKey : "data" }
});

Ext.define('AM.store.ExampleStore', {
extend: 'Ext.data.Store',
model : "AM.model.Page",    
 proxy: {
    type: 'ajax',
    url: 'example.json',
    reader: {
        type: 'json',
        root: 'spaces'
    }
},
listeners : {
        'load' : function(store, records, successful) {
                    console.log('Loading the records');
                    console.log(store.data);
                }
     }
})

The data which I am getting after logging the store that contains only {page : 0} and the data part is missing.

Just want to know Where I am making the mistake or Any thing I am not including in the store or models.

Thanks

I have just added my app.js file Please go though it in the above question — Puneet Srivastava

Oğuz Çelikdemir Oğuz Çelikdemir · Accepted Answer · 2014-01-20T11:55:29

The Model should be:

Ext.define('AM.model.Example', {
   extend: 'Ext.data.Model',
   fields: [
     {name: 'firstname', type: 'string'},
     {name: 'id', type: 'int'},
     ...
});

in your case, root should be data. Root means master node of your Json object.

    Ext.define('AM.store.ExampleStore', {
    extend: 'Ext.data.Store',
    model : "AM.model.Page",    
     proxy: {
        type: 'ajax',
        url: 'example.json',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    listeners : {
            'load' : function(store, records, successful) {
                        console.log('Loading the records');
                        console.log(store.data);
                    }
         }
    })

How to create Extjs Models and its association with other models

1 Answers