PDA

View Full Version : How to render nested JSON as a tree?



niklasro
24 Oct 2013, 1:28 AM
I want a view that looks similar to this using nested JSON data.

46530

As can be seen, our JSON has productOfferings which has a productSpecification. I can successfully render the productOfferings as a tree but I can't render the productSpecifications. I tried to make a relation in Sencha Architect that a productOffering "has a" productSpecification and that a productSpecification "belongs to" a produtOffering but productSpecification will still not render and I get this error when trying to expand a productOffering:


TypeError: records[i] is undefined
ns[i].viewRecordId = records[i].internalId;


What does the above error mean? How can a successfully render all my nodes? My JSON has the following structure (this is not all of it since the file is large):

{

productOfferings:
[


{

name: "Mobile subscription with Internet access 2GB and iPad 32GB",
description: "Joors 2GB mobile broadband and iPad 32GB",
productOfferings:
[


{

id: 5,
name: "Ipad with 32 GB storage",
description: "A iPad 32 GB Product Offering",
productSpecification:
{

id: 5,
name: "IPad",
description: ""
}
},

{

id: 8,
name: "Mobile subscription with Sim Card and Internet access 2GB",
description: "Mobile subscription with Sim Card and Internet access 2GB",
productSpecification:
{

id: 9,
name: "Mobile subscription with sim card and Internet access",
description: "Mobile subscription with sim card and Internet access",
productSpecifications:
[


{

id: 2,
name: "Mobile subscription with Sim Card",
description: "This is the classic Subscription product of a Mobile Network totally void of Services, so it can only be used for accessing a HPLMN. Simply put a MSISDN + SIM"
},

{

id: 4,
name: "Mobile Internet access",
description: "This is a GPRS Service for a Mobile Network Access Product for accessing Internet"
}
]
}
}
]
}
]
}

I have been able to render it but incompletely:

46531
My code is the following




Ext.define('MyApp.model.ProductOfferings', {
extend: 'Ext.data.Model',


uses: [
'MyApp.model.ProductSpecifications'
],


fields: [
{
name: 'name'
}
],


hasMany: {
model: 'MyApp.model.ProductSpecifications',
name: 'productSpecification'
}
});


Ext.define('MyApp.model.ProductSpecifications', {
extend: 'Ext.data.Model',


uses: [
'MyApp.model.ProductOfferings'
],


fields: [
{
name: 'name'
}
],


belongsTo: {
model: 'MyApp.model.ProductOfferings'
}
});


Ext.define('MyApp.view.CheckedNodeTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.checkedtree',


frame: true,
height: 400,
width: 640,
title: 'Product Offerings',
store: 'CheckNodes',
displayField: 'name',
lines: false,
rootVisible: false,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {


},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
action: 'getCheckedNodes',
text: 'Add new'
}
]
}
]
});


me.callParent(arguments);
}


});






Can you tell me what I must do to render the complete tree?

Gary Schlosberg
26 Oct 2013, 1:59 PM
Here's a thread that might prove helpful:
http://www.sencha.com/forum/showthread.php?264671