How to create Extjs Models and its association with other models - extjs

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

Answer 1

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);
}
}
})