PDA

View Full Version : How to render a TreeView from JSON?



niklasro
23 Oct 2013, 6:12 AM
I used Sencha Architect to make a TreeView from JSON but it's not rendering perfectly. When I first load the view it looks as expected:
4650146502
But when I click the nodes that don't have a child I receive error from Javascript which indicates that I didn't do this correctly:


TypeError: records[i] is undefined







ns[i].viewRecordId = records[i].internalId;











ext-all-debug.js (line 60517)



TypeError: d.parentNode is null






d.parentNode.insertBefore(replacement, d);











4
ext-all-debug.js (line 10411)

What do the above errors mean? My code looks like the following:

<pre>

/*
* File: app/controller/CheckNode.js
*
* This file was generated by Sencha Architect version 2.2.3.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define('MyApp.controller.CheckNode', {
extend: 'Ext.app.Controller',

models: [
'CheckNode'
],
stores: [
'CheckNodes'
],
views: [
'CheckedNodeTree'
],

refs: [
{
ref: 'checkedTree',
selector: 'checkedtree'
}
],

onButtonClick: function(button, e, eOpts) {
var records = this.getCheckedTree().getView().getChecked(),
names = [];

Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});

Ext.MessageBox.show({
title: 'TODO',
msg: names.join('<br />Not implemented'),
icon: Ext.MessageBox.INFO
});
},

init: function(application) {
this.control({
"button[action='getCheckedNodes']": {
click: this.onButtonClick
}
});
}

});

/*
* File: app/model/CheckNode.js
*
* This file was generated by Sencha Architect version 2.2.3.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

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

fields: [
{
name: 'name'
}
]
});
/*
* File: app/store/CheckNodes.js
*
* This file was generated by Sencha Architect version 2.2.3.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define('MyApp.store.CheckNodes', {
extend: 'Ext.data.TreeStore',

requires: [
'MyApp.model.CheckNode'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.CheckNode',
storeId: 'CheckNodes',
proxy: {
type: 'ajax',
url: 'data/tree.json'
}
}, cfg)]);
}
});

/*
* File: app/view/CheckedNodeTree.js
*
* This file was generated by Sencha Architect version 2.2.3.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

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);
}

});

/*
* File: app/view/Viewport.js
*
* This file was generated by Sencha Architect version 2.2.3.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define('MyApp.view.Viewport', {
extend: 'MyApp.view.CheckedNodeTree',
renderTo: Ext.getBody()
});

</pre>

The JSON structure that is read to populate the views looks as follows:


{"productOfferings":[{"@class":"BundledProductOffering","id":26,"name":"Mobile subscription with Internet access 2GB and iPad 32GB","description":"Joors 2GB mobile broadband and iPad 32GB","status":null,"brand":{"id":"Joors SE"},"validFor":{"startDateTime":1382514501359,"endDateTime":null},"productOfferings":[{"@class":"SimpleProductOffering","id":5,"name":"Ipad with 32 GB storage","description":"A iPad 32 GB Product Offering","status":"active","brand":{"id":"Joors SE"},"validFor":{"startDateTime":1382514501222,"endDateTime":null},"productSpecification":{"@class":"MobileProductSpecification","id":5,"name":"IPad","description":"","productNumber":"1234567","validFor":{"startDateTime":1382514501111,"endDateTime":null},"brand":{"id":"Joors SE"},"characteristics":null,"resourceSpecification":{"@class":"PhysicalDeviceSpecification","id":13,"resourceCapacity":null,"logicalResourceSpecification":null,"modelNumber":"A1460","partNumber":null,"skuNumber":null,"vendorName":"Apple","tags":[{"name":"hardware","value":"IPad"},{"name":"hardwareCategory","value":"tablet"},{"name":"hardwareBrand","value":"Apple"}],"descriptorId":null,"characteristics":[{"id":1,"name":"Color","description":null,"minCardinality":null,"maxCardinality":null,"validFor":null,"values":[{"valueType":"COLOR","defaultValue":false,"value":"WHITE","valueFrom":null,"valueTo":null,"unitOfMeasure":null,"validFor":{"startDateTime":1382514500714,"endDateTime":null}},{"valueType":"COLOR","defaultValue":false,"value":"BLACK","valueFrom":null,"valueTo":null,"unitOfMeasure":null,"validFor":{"startDateTime":1382514500713,"endDateTime":null}}],"valueType":null,"descriptorId":null},{"id":2,"name":"Storage size","description":null,"minCardinality":null,"maxCardinality":null,"validFor":null,"values":[{"valueType":"INTEGER","defaultValue":false,"value":"32","valueFrom":null,"valueTo":null,"unitOfMeasure":"GB","validFor":{"startDateTime":1382514500745,"endDateTime":null}}...

The above is not the complete JSON file since it is large. Can you tell me what the errors mean and find what I did wrong in the code?

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