PDA

View Full Version : How do I get parent and child nested json data to display in my ExtJS 4.2 grid?



xjscrafter
5 Feb 2014, 4:27 PM
In the following sample program, I can't get Group Name and Group Address to display properly.

With the "record" config commented out, the group name does not display, and the pool IP displays as the group name.

If I uncomment the "record" config, no data at all displays in the grid.

I thought uncommenting the 'record' config might work, but it does not, no data shows.

So in essence, I want to display nested data, but also data from the outside level.

So for the example data, I want 4 rows in the grid, one for each "group". Two of the groups rows will have the same name and ip data from their parent, and the other two rows will also have the same name and ip for their parent.


Ext.onReady(function() {
Ext.define('com.myCompany.MyGridModel', {
extend : 'Ext.data.Model',
fields : [{
name : 'poolname'
}, {
name : 'pooladdress',
mapping: 'ip'
}, {
name : 'groupname'
}, {
name : 'groupaddress',
mapping: 'ip'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'com.myCompany.MyGridModel',
sortOnLoad: true,
sorters: { property: 'address', direction : 'ASC' },
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'objects' //,
// record: 'groups'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Pool Name',
dataIndex: 'poolname'
}, {
text: 'Pool Address',
dataIndex: 'pooladdress'
}, {
text: 'Group Name',
dataIndex: 'groupname'
}, {
text: 'Group Address',
dataIndex: 'groupaddress'
}],
renderTo: Ext.getBody(),
});
grid.getView().refresh();
});



{
"objects": [{
"poolname": "Pool One",
"ip": "10.10.10.10",
"groups": [{
"groupname": "Pool 1 Group 1",
"ip": "100.100.100.100"
}, {
"groupname": "Pool 1 Group 2",
"ip": "150.150.150.150"
}]
},
{
"poolname": "Pool Two",
"ip": "20.20.20.20",
"groups": [{
"groupname": "Pool 2 Group 1",
"ip": "200.200.200.200"
}, {
"groupname": "Pool 2 Group 2",
"ip": "250.250.250.250"
}]
}]
}




<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../ext-4.2.2.1144/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../ext-4.2.2.1144/ext-all-debug.js"></script>
<script type="text/javascript" src="grid1.js"></script>
</head>
<body>
</body>
</html>

xjscrafter
5 Feb 2014, 5:45 PM
*********** UPDATE ********
I tried this, but still no luck:


Ext.onReady(function() {
Ext.define('com.myCompany.MyGridModel', {
extend : 'Ext.data.Model',
fields : [{
name : 'poolname'
}, {
name : 'pooladdress',
mapping: 'ip'
}],
hasMany: [{
model: 'Groups',
name: 'groups'
}]
});
Ext.define("Groups", {
extend: 'Ext.data.Model',
fields: [{
name: 'groupname'
}, {
name: 'groupaddress', mapping: 'ip'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'com.myCompany.MyGridModel',
sortOnLoad: true,
sorters: { property: 'address', direction : 'ASC' },
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'objects' //,
// record: 'groups'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Pool Name',
dataIndex: 'poolname'
}, {
text: 'Pool Address',
dataIndex: 'pooladdress'
}, {
text: 'Group Name',
dataIndex: 'groupname'
}, {
text: 'Group Address',
dataIndex: 'groupaddress'
}],
renderTo: Ext.getBody(),
});
grid.getView().refresh();
});

xjscrafter
5 Feb 2014, 6:32 PM
Tried the info on this link but no luck:

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Reader

xjscrafter
5 Feb 2014, 6:49 PM
I saw a post that said Model is not good with nested data as I want to use it, and to use NodeInterface, but is it possible to use NodeInterface to get the data and display in a grid?

palakurthivishal
5 Feb 2014, 10:12 PM
Hello xjscrafter,
Check out this snippet and let me know if the output meets your requirements.

var store = Ext.create('Ext.data.Store', {
fields: [{name : 'poolname'},{name : 'pooladdress', mapping : 'ip' }, {name : 'groups' }],
data :[{
"poolname": "Pool One",
"ip": "10.10.10.10",
"groups": [{
"groupname": "Pool 1 Group 1",
"ip": "100.100.100.100"
}, {
"groupname": "Pool 1 Group 2",
"ip": "150.150.150.150"
}]
},
{
"poolname": "Pool Two",
"ip": "20.20.20.20",
"groups": [{
"groupname": "Pool 2 Group 1",
"ip": "200.200.200.200"
}, {
"groupname": "Pool 2 Group 2",
"ip": "250.250.250.250"
}]
}]


});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Pool Name',
dataIndex: 'poolname',
flex : 1
}, {
text: 'Pool Address',
dataIndex: 'pooladdress',
flex : 1
}, {
text: 'Group Names',
dataIndex: 'groups',
flex : 3,
renderer : function(a, b, record){
var groups = record.data.groups;
var groupNames = [];
Ext.each(groups, function(group){
groupNames.push(group.groupname);
});

return groupNames.join('&');

}
}, {
text: 'Group Addresses',
dataIndex: 'groups',
renderer : function(a, b, record){
var groups = record.data.groups;
var groupAddresses = [];
Ext.each(groups, function(group){
groupAddresses.push(group.ip);
});

return groupAddresses.join(' & ');

},
flex : 3
}],
renderTo: Ext.getBody(),
});
grid.getView().refresh();

xjscrafter
5 Feb 2014, 10:29 PM
Its interesting, but I need one row per group, so four rows in this case. The parent info would be duplicated for each two rows. But thanks for your response.

palakurthivishal
6 Feb 2014, 8:50 AM
Hello xjscrafter,
As of now, I don't have any solution to meet your exact requirement, but I can only say that I'll keep trying...

xjscrafter
6 Feb 2014, 8:52 AM
I appreciate your efforts. This is one tough nut to crack.

xjscrafter
6 Feb 2014, 7:55 PM
I thought maybe I could do this using a grouping grid, like the one in the Sencha Kitchen Sink example.

http://docs.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid

But in that example app, the model is simple and the data is not nested data.

So are my hopes of solving this using grouping grid in vain?

Can I extend the reader class to read the data? If so, how might I approach this?

palakurthivishal
6 Feb 2014, 9:12 PM
I would recommend you to opt for a treepanel for such kind of data...