ExtJS 4 grid: display nested data models with associations - php

Question

i am new to ExtJS and stuck at a problem. I have a deep nested json data that i have successfully loaded in a store, using multiple associated models. But for the next step, i am unable to display this data in a simple grid, please help. How can i display something in that grid which is located deep inside the json.... here is my json
{
"success" : "true",
"total":2,
"user" :
{
"id" : 12,
"email" : "abc#gmail.com",
"course" :
{
"name" : "BESE",
"institute" :
[{
"name" : "Engineering University",
"semester" :
{
"number":1,
"TCH" : 12,
"GPA" : 2.32,
"Marks":23.32,
"record" : [
{
"subject" : "Global Studies",
"CH":2,
"GP":4,
"Grade": "A+",
"Marks":99.1
},
{
"subject" : "Digital Logic Design",
"CH":4,
"GP":3.5,
"Grade": "B+",
"Marks":79.1
}
]
}
},
{
"name" : "Another University",
"semester" :
{
"number":2,
"TCH" : 22,
"GPA" : 1.32,
"Marks":13.32,
"record" : [
{
"subject" : "C++",
"CH":2,
"GP":3,
"Grade": "C+",
"Marks":59.1
},
{
"subject" : "Engg Math",
"CH":4,
"GP":2.5,
"Grade": "C",
"Marks":39.1
}
]
}
}]
}
}
}
and this is my code......
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'email', type: 'string'},
],
proxy: {
type: 'ajax',
url : 'getRecord.php',
reader: {
type: 'json',
root: 'user'
}
},
hasMany: { model: 'Course', name: 'course' ,associationKey: 'course'}
});
Ext.define('Course', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
],
belongsTo: 'User',
hasMany: { model: 'Institute', name: 'institute' ,associationKey: 'institute'}
});
Ext.define('Institute', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
],
belongsTo: 'Course',
hasMany: { model: 'Semester', name: 'semester',associationKey: 'semester' }
});
Ext.define('Semester', {
extend: 'Ext.data.Model',
fields: [
{name: 'number', type: 'int'},
{name: 'TCH', type: 'float'},
{name: 'GPA', type: 'float'},
{name: 'Marks', type: 'float'},
],
belongsTo: 'Institute',
hasMany: { model: 'Record', name: 'record',associationKey: 'record' }
});
Ext.define('Record', {
extend: 'Ext.data.Model',
fields: [
{name: 'subject', type: 'string'},
{name: 'CH', type: 'float'},
{name: 'GP', type: 'float'},
{name: 'Grade', type: 'string'},
{name: 'Marks', type: 'float'},
],
belongsTo: 'Semester',
});
Ext.require('Ext.data.*');
Ext.require('Ext.grid.*');
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.Store({
model: "User",
});
store.load({
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'email'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'course>aname',
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'User.course.name'
}
]
});
});

Answer 1

It's currently a limitation that nested data is not easily loaded into a grid by default, but it's being actively worked on.

Answer 2

maybe mapping can help you, I've resolved similar (but more simple) problem in this way:
My json:
{"operations":
[
{"timestamp": {"__dt__": "2011-08-31T15:39:17"}, "description": "pippo"},
{"timestamp": {"__dt__": "2011-08-31T16:51:43"}, "description": "pluto"}
]
}
My model:
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'timestamp.__dt__',
fields: [{name:'__dt__', allowBlank:true, mapping:'timestamp.__dt__'},
{name:'description', allowBlank:false}]
});
My columns:
columns: [{header: 'Timestamp', width: 150, sortable: true, dataIndex: '__dt__'},
{header: 'Description' , width: 100, sortable: true, dataIndex: 'description', editor:'textfield'}],
Hope it helps...

Answer 3

If your json object does not meet extjs requirements just change object format. You can do something similar:
Ext.ajax.request({url: 'getRecords.php', success: function(response) {
var data = Ext.decode(response.reseponseText);
//format your data
grid.loadData(formatedData);
}})
You can also format your json object on the server side