Results 1 to 2 of 2

Thread: How to render a TreeView from JSON?

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default How to render a TreeView from JSON?

    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:
    checkTree (1).pngcheckTree.jpg
    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:

    Code:
    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:
    Code:
    {"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?
    Last edited by niklasro; 23 Oct 2013 at 11:04 PM. Reason: code formatting

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506
    Vote Rating
    296
      0  

    Default

    Here's a thread that might prove helpful:
    http://www.sencha.com/forum/showthread.php?264671

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •