PDA

View Full Version : populating a GRID panel from a nested JSON



eljuventino
9 Dec 2013, 9:53 AM
Hi to all extjs users.
my objective is to build a grid from a json simple as that, but the problem is that i'm using extjs for the first time.
so far i succeeded to parse a nested json into a Model (using hasMany and belongsTo...) and store all the data and finally showing it in console to be sure that every data is correctly stored.
now i'm struggling to find a way to display those data into a grid panel specially the deeply one.
i searched everywhere but i didn't find any proper solution to this matter.
i don't know why this isn't working :


...
columns: [
{text: "Icone", width:30, dataIndex: 'SearchedString'},
{text: "Name", dataIndex: 'Occresults.MinRange'},
],
....


here is the json file :

{ "results":
{
"SearchedString":"Manage",
"Language":"EN",
"Occresults" :
{
"MinRange" : "0",
"MaxRange" : "50",
"OccList" :
[
{
"ObjectIcon":"Moniker",
"ObjectId":"idabsOcc1",
"ObjectName" : "Occ1Name",
"HitCount":"5",
"Language" : "EN",
"Locations":
[
{
"ObjectId" : "ObjectId",
"ObjectName" : "ObjectName",
"ObjectIcon":"Moniker",
"MetaclassId" : "metaclassId",
"Path" : "Path préconstruit",
"FoundWords":
[
{
"AttributeId" : "AttributeId",
"AttributeName" : "AttributeName",
"Words":
[
{
"WordPosition":"10",
"WordFound" :"Found Word1"
},
{
"WordPosition":"20",
"WordFound" :"Found Word2"
}
]
},
{
"AttributeId" : "AttributeId2",
"AttributeName" : "AttributeName2",
"Words":
[
{
"WordPosition":"10",
"WordFound" :"Found Word1"
},
{
"WordPosition":"20",
"WordFound" :"Found Word2"
}
]
}


]

},
{
"ObjectId" : "ObjectId2",
"ObjectName" : "ObjectName2",
"ObjectIcon":"Moniker2",
"MetaclassId" : "metaclassId",
"Path" : "Path préconstruit",
"FoundWords":
[
{
"AttributeId" : "AttributeId2",
"AttributeName" : "AttributeName2",
"Words":
[
{
"WordPosition":"10",
"WordFound" :"Found Word1"
},
{
"WordPosition":"20",
"WordFound" :"Found Word2"
}
]
},
{
"AttributeId" : "AttributeId3",
"AttributeName" : "AttributeName3",
"Words":
[
{
"WordPosition":"10",
"WordFound" :"Found Word1"
},
{
"WordPosition":"20",
"WordFound" :"Found Word2"
}
]
}


]

}

]
}
]
}
}
}




the Model that i created :


Ext.require([ 'Ext.data.*',
'Ext.grid.*'
]);
Ext.define("Result", {
extend: 'Ext.data.Model',
fields: [
'SearchedString', 'Language'
],
hasMany: {model: 'Occresult', name: 'Occresults'}

});


Ext.define("Occresult", {
extend: 'Ext.data.Model',
fields: [
'MinRange', 'MaxRange'
],
hasMany: {model: 'Occurence', name: 'OccList',associationKey: 'OccList'},
belongsTo: 'Result'
});


Ext.define("Occurence", {
extend: 'Ext.data.Model',
fields: [
'ObjectIcon', 'ObjectId', 'ObjectName', 'HitCount', 'Language'
],
hasMany: {model: 'Location', name: 'Locations',associationKey: 'Locations'},
belongsTo: 'Occresult'
});


Ext.define("Location", {
extend: 'Ext.data.Model',
fields: [
'ObjectId', 'ObjectName', 'ObjectIcon', 'MetaclassId', 'Path'
],


hasMany : {model: 'FoundWord', name: 'FoundWords', associationKey: 'FoundWords'},
belongsTo: 'Occurence'
});


Ext.define("FoundWord", {
extend: 'Ext.data.Model',
fields: [
'AttributeId', 'AttributeName'
],
hasMany : {model: 'Word', name: 'Words', associationKey: 'Words'},
belongsTo: 'Location'
});


Ext.define("Word", {
extend: 'Ext.data.Model',
fields: [
'WordPosition', 'WordFound'
],

belongsTo: 'FoundWord'
});


and here is the store and the creation of the grid panel :


Ext.onReady(function() {


var store = Ext.create('Ext.data.Store', {
storeId: 'result',
model: 'Result',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'scripts/originalJson.html',
reader: {
type: 'json',
root: 'results'
}
}
});

store.load();


// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
width: 350,
height: 280,
renderTo: Ext.getBody(),
columns: [
{text: "Searched Text", width:30, dataIndex: 'SearchedString'},
{text: "Range", dataIndex: 'Occresults.MinRange'},
],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});

tobiu
9 Dec 2013, 11:40 AM
dataIndex does not support nested structures.

1) you can use a mapping inside your field definitions:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Field-cfg-mapping

2) you can use a custom renderer and return nested values this way:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

(the renderer has the record as a param)

eljuventino
10 Dec 2013, 1:39 AM
thanks for the clear response.
now i'm trying to do another solution. knowing that the store variable contains all the data that i need , can i create a new store where i will input the data that will be shown in the grid.
it will be helpful if i loaded the data once and use it in different place

i tested this but it doesn't work :


....
var customizedStore= store.first().Occresults().OccList();
....


in the grid i used the new store :





...
var grid = Ext.create('Ext.grid.Panel', {
store: customizedStore,
....