PDA

View Full Version : Consuming Nested JSON data in a Grid



bkirkman
29 Feb 2012, 7:33 AM
I have the following:
JSON FILE:

[
{
"calcs": [
{
"calcname": "Calc1",
"description": "C1"
},
{
"calcname": "CalcTest",
"description": "Calc Test 1"
}
],
"description": "Calc 1",
"id": 27
},
{
"calcs": [
{
"calcname": "Calc1",
"description": "C1"
},
{
"calcname": "CalcTest1",
"description": "Calc Test 1"
},
{
"calcname": "CalcTest2",
"description": "Calc Test 2"
},
{
"calcname": "CalcTest3",
"description": "Calc Test 3"
}
],
"description": "All Calculations",
"id": 7
}
]


MODEL:

Ext.define('Test.model.CalcCatTemplate',
{
extend: 'Ext.data.Model',
idProperty: 'calcname',
fields:
[
{ name: 'calcname', type: 'string'
},{ name: 'description', type: 'string'
}
]
});




STORE:

Ext.define('Test.store.CalcCatTemplates',
{
extend: 'Ext.data.Store',
model: 'Test.model.CalcCatTemplate',
autoLoad: true,

proxy:
{
type: 'rest',
url: 'data/jsonfile.json,
reader:
{
type: 'json',
root: 'calcs'
}
}
});

In my grid all the description field is the description from the root and it ignores using the 'calcs' data array.
How can I get this to read the nested 'calcs' data.

mitchellsimoens
29 Feb 2012, 12:04 PM
To consume that JSON you will need to update your Model and Store:


Ext.define('Test.model.CalcCatTemplate', {
extend: 'Ext.data.Model',
idProperty: 'calcname',
fields: [
'calcs',
'description',
'id'
]
});

Ext.define('Test.store.CalcCatTemplates', {
extend: 'Ext.data.Store',
model: 'Test.model.CalcCatTemplate',
autoLoad: true,

proxy: {
type: 'rest',
url: 'data/jsonfile.json,
reader: {
type: 'json'
}
}
});

The calcs field will be an array

ErnestoR
29 Feb 2012, 12:12 PM
Try using a templatecolumn in your grid.

Configure your tpl to something like this



tpl: '<tpl for="calcs">{calcname} {description} <br /> </tpl> '

bkirkman
1 Mar 2012, 8:56 AM
I still couldn't get it to work with either change and I now need a Tree Grid to display the information. I still have a problem with how the control works with the JSON file. The Tree Grid appears to see the structure of the file correctly but does not display the string information from the 'description' field.

Why doesn't the description display in the Tree Grid?
NOTE: Using EXT JS 4.0.7 btw

Here is my new data store:

Ext.define('Test.store.CalcCategories',
{
extend: 'Ext.data.TreeStore',
model: 'Test.model.CalcCategory',
autoLoad: true,
folderSort: true,
proxy:
{
type: 'rest'
, url: 'data/calccat.json'
, reader:
{
type: 'json'
}
}
});

And my new Model:


Ext.define('Test.model.CalcCategory',
{
extend: 'Ext.data.Model',
fields:
[
{ name: 'description', type:'string'}
, { name: 'id', type:'int'}
]
});

And my new JSON file:


[{
"description":"AIX CALC",
"id":27,
"expanded": true,
"children":
[{
"calcname":"CalcNDC",
"description":"NDC",
"leaf": true
},{
"calcname":"CalcIHSPrice",
"description":"IHS Price",
"leaf": true
}]
},{
"description":"All Calculations",
"id":7,
"expanded": true,
"children":
[{
"calcname":"CalcNDC",
"description":"NDC",
"leaf": true
},{
"calcname":"CalcIHSPrice",
"description":"IHS Price",
"leaf": true
},{
"calcname":"CalcPreProcessing",
"description":"Pre-Processing ",
"leaf": true
},{
"calcname":"CalcProRate",
"description":"Pro Rate",
"leaf": true
}]
}]


Last, here is my TREE VIEW which is accessed by the Viewport:


Ext.define('Test.view.calccategory.Tree',
{
extend: 'Ext.tree.Panel',
alias: 'widget.calccategory_tree',
store: 'CalcCategories',
layout: Layout.FIT,
collapsible: false,
useArrows: true,
rootVisible: false,
displayField:'description',
initComponent: function () {


this.columns =
[
{
xtype: 'treecolumn',
text: 'Category',
flex: 50,
sortable: true,
dataIndex: 'description'
}
],
this.callParent();
}
});

bkirkman
1 Mar 2012, 10:39 AM
So I thought 'displayField' in the tree panel would let me choose which field in the model was to be used for node's text so I added - displayField:'description' - right after rootVisible in the tree.panel. It had no affect.
If I changed the json file and model so that 'description' was replaced with 'text' it then displayed as desired.

My service though won't send back 'text' but 'description' so how do I change this so that the node text displays the 'description' field from my model instead of 'text' field?

mitchellsimoens
1 Mar 2012, 10:50 AM
In your model you can use the mapping config on the field


{ name : 'text', type : 'string', mapping : 'description' }

bkirkman
1 Mar 2012, 10:58 AM
mitchell,
I changed my model to this:


Ext.define('Test.model.CalcCategory',
{
extend: 'Ext.data.Model',

fields:
[
//{ name: 'description', type: 'string' },
{ name: 'text', type: 'string', mapping: 'description' }
, { name: 'id', type: 'int' }
]
});


and did a search and replace in my json file for 'text' to 'description'.

Unfortunately, it no longer displays text on the nodes. Was there somewhere else I was supposed to use mapping?

I sure thought displayField was headed down the right path...oh well.

mitchellsimoens
1 Mar 2012, 11:00 AM
displayField on the tree panel should change it

bkirkman
1 Mar 2012, 11:04 AM
Just tried it and no luck still no text in the nodes unless I change the json file doing search and replace 'description' with 'text' I get no display of text in my nodes. Just a reminder I am using 4.0.7 is this a defect in mapping for this release? See my code above to see how I configured displayField in case I did something incorrect.