PDA

View Full Version : How to get nested list in json for grid panel



earist
21 Feb 2014, 12:15 AM
Hi all,

I using ExtJS version 4.1
I would like to create grid panel from my json data.
The data is list of projects and each project contains list of branches.
For example:



{
"projects": [{
"name": "US",
"projectid": "1",
"branches": [{
"owner": "owner1",
"branchid": 1,
"branchname": "US_Store1",
"description": "description",
"createdate": "01/00/12 10:38 AM",
"projectid": "1"
},
{
"owner": "owner2",
"branchid": 2,
"branchname": "US_Store2",
"description": "description",
"createdate": "15/07/13 10:38 AM",
"projectid": "1"
}]
},{
"name": "UK",
"projectid": "2",
"branches": [{
"owner": "owner1",
"branchid": 3,
"branchname": "UK_Store1",
"description": "description",
"createdate": "05/08/13 10:38 AM",
"projectid": "2"
},
{
"owner": "owner3",
"branchid": 4,
"branchname": "UK_Store2",
"description": "description",
"createdate": "11/10/13 10:38 AM",
"projectid": "2"
}]
},{
"name": "China",
"projectid": "3",
"branches": [{
"owner": "owner2",
"branchid": 5,
"branchname": "CH_Store1",
"description": "description",
"createdate": "02/11/14 10:38 AM",
"projectid": "3"
}]
}]
}


The output should be

Branch Id | Branch Name | Project Name | Owner | Create Data | Description

47990

Following is my ExtJS code:


Ext.define('Branch', {
extend: 'Ext.data.Model',
idProperty : 'branchid',
fields : [ {
name : 'branchid'
},{
name : 'branchname'
}, {
name : 'owner',
}, {
name : 'createdate',
convert : function(value)
{
return Ext.Date.parse(value, "m/d/y h:i A");
}
}, {
name : 'projectid',
}, {
name : 'description',
}
]
});

Ext.define('Project', {
extend : 'Ext.data.Model',
idProperty : 'projectid',
requires:[
'Branch'
],
fields : [{
name : 'projectid'
}, {
name : 'name'
}],

hasMany:[{
foreignKey: 'projectid',
associationKey: 'branches',
name: 'branches',
model: 'Branch'
}]

});


Ext.define('ProjectDetail', {
extend : 'Ext.panel.Panel',
layout: 'fit',
constructor : function(config) {
this.initConfig(config);

var jsonStore = new Ext.data.Store( {
model: 'Project',
autoLoad: false,
proxy : {
type: 'ajax',
url : '/project',
reader : {
root: 'projects',
totalProperty : 'total',
}
},
sorters : [{
property : 'branchid',
direction : 'ASC'
} ]
});

var gridPanel = Ext.create('Ext.grid.Panel', {
store : jsonStore,
autoScroll : true,
columns : [
{
text : 'Branch',
dataIndex : 'branchid'
},
{
text : 'Branch Name',
dataIndex : 'branchname'
},
{
text : 'Project Name',
dataIndex : 'name'
},
{
text : 'Owner',
dataIndex : 'owner'
},
{
text : 'Date',
dataIndex : 'createdate',
xtype: 'datecolumn',
renderer: function (value, metaData, record, row, col, store, gridView)
{
var formatValue = '-';
if (value)
formatValue = Ext.Date.format(value, 'm/d/y h:i A');
return formatValue;
}
},
{
text : 'Description',
dataIndex : 'description'
}
]
});

Ext.apply(this, {
items : [gridPanel]
});

jsonStore.load();

this.callParent(arguments);
return this;
}
});


Ext.define('ProjectContainer', {
extend : 'Ext.container.Container',
layout: 'fit',
constructor : function(config) {

this.initConfig(config);

Ext.apply(this, {
items : [ Ext.create('ProjectDetail') ]
});

this.callParent(arguments);
return this;
}

});


The output does not contain Branch data.
47991
How can I fix this problem?

Thank in advance.
earist.

mitchellsimoens
3 Mar 2014, 7:54 AM
The store is loading all the data and the data you want to show is in the association? How is the grid supposed to know you only want to show the associated data?

f.baron
3 Mar 2014, 9:16 AM
To obtain a branches' grid you should build a store of branches from the json you receive. If you don't want to pass through this conversion you could consider another kind of visualization, for example a grid with row expander (http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.grid.plugin.RowExpander) in which you can show a branches list for every project (also with a grid inside a grid :P).