1. #1
    Ext JS Premium Member
    Join Date
    Nov 2010
    Location
    Columbia, MD, USA
    Posts
    147
    Vote Rating
    0
    msmolyak is on a distinguished road

      0  

    Default Loading Tree from JSON obejct

    Loading Tree from JSON obejct


    All the tree-related examples assume that JSON comes from a URL. How do I load the tree from a JSON object that is available in my program? I tried creating a TreeStore with MemoryProxy, and loading data in loadJsonFromServer() method, but no tree gets rendered (I checked, the data being loaded have the proper structure).

    Code:
    Ext.define('ClusterTreeUi', {
    	extend: 'Ext.tree.TreePanel',
        alias: 'widget.clusterTree',
        title: 'Clusters',
        width: 250,
        autoScroll: true,
        collapsible: true,
        rootVisible: true,
        store: new Ext.data.TreeStore({
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json'
    //                root: 'clusters'
                }
            }
        }),
        root: {
            expanded: true
        },
        initComponent: function() {
            ClusterTreeUi.superclass.initComponent.call(this);
        },
    
        loadJsonFromServer: function (clusterJson) {
            var treeJson = this.processClustersNode(clusterJson.cluster.clusters, treeJson);
            this.store.proxy.data = treeJson;
            this.store.load();
        },
    ...
    How do I create a tree based on a JSON object?

    Thank you,

    Michael

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    941
    Vote Rating
    66
    westy is just really nice westy is just really nice westy is just really nice westy is just really nice

      0  

    Default


    Not had a chance to play with the tree yet, but on first glance I'd assume you should be calling loadData on your store rather than load?

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2010
    Location
    Columbia, MD, USA
    Posts
    147
    Vote Rating
    0
    msmolyak is on a distinguished road

      0  

    Default


    Tried that - no success. When I stepped through the code, I discovered that load data expects the tree to have a model, which mine does not. Ext JS 4 PR 5 has an example of a tree with a model, but it obfuscates more than illuminates the need for a model in a tree panel. In any case, I structured my JSON not to need a model, so this is a moot point.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
    Nickname is on a distinguished road

      0  

    Default


    Hi,

    a working example for TreeStore with MemoryProxy and inline data would be great.
    Tried some hours now to find a solution, but all variations of my data and init configs failed.

    Here is one of many ways I've tried. This will generate a TreePanel with the defined rootNode "Ext JS"

    PHP Code:
    Ext.onReady(function() {
        
    Ext.regModel('TreeMenuNode', {
            
    fields: [
                {
    name'id',    type'int'},
                {
    name'text',  type'string'}
            ]
        });


        var 
    store = new Ext.data.TreeStore({
            
    autoLoadtrue,
            
    model'TreeMenuNode',
            
    data : {
                
    root: {
                    
    id1,
                    
    text'hallo'
                
    }
            },
            
    proxy: {
                
    type'memory',
                
    reader: {
                    
    type'json',
                    
    root'root'
                
    }
            },
            
    root: {
                
    text'Ext JS',
                
    id'src',
                
    expandedtrue
            
    },
            
    listeners: {
                
    beforeload: function() {
                    
    console.log("called beforeload"arguments);
                },
                
    load: function(){
                    
    // load does not get called!?
                    
    console.log("called load"arguments);
                }
            }
        });

        var 
    tree = new Ext.tree.TreePanel({
            
    title'demo',
            
    width500,
            
    height300,
            
    renderToExt.getBody(),
            
    useArrowstrue,
            
    rootVisibletrue,
            
    storestore,
        });
    }); 
    Also tried data structure from
    http://dev.sencha.com/deploy/ext-4.0.../get-nodes.php
    http://192.168.2.112/noc/lib/Ext/exa.../treegrid.json
    (any many many try and error ones)

    While debugging with extjs source I always stopped at the point, where I think the data/child data should be created into the tree (in ext-all-debug.js around line 59730) Ext.data.TreeStore -> setRootNode

    PHP Code:
    dataRoot reader.getRoot(root);
    ...
    if (
    dataRoot) {
        
    children reader.extractData(dataRoot);
        
    this.fillNode(rootchildren);

    "dataRoot" is always empty, so I think my data structure or proxy/reader config is the problem.

    The Model is generated internally, even no model is defined in the store.

    Ext.data.TreeStore -> constructor
    PHP Code:
    if (!config.model && !config.fields) {
        
    config.fields = [{name'text'type'string'}];

    Last edited by Nickname; 26 Mar 2011 at 1:28 PM. Reason: fixed format

Similar Threads

  1. EXTJS 3.0 Dynamically loading tree using JSON response
    By ankuravlani in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 20 Oct 2009, 10:21 AM
  2. [solved] loading a tree from json...
    By zhegwood in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 28 Jan 2009, 12:44 PM
  3. Loading a tree from JSON
    By aberezin in forum Community Discussion
    Replies: 1
    Last Post: 4 May 2008, 9:02 AM
  4. Loading tree with JSON object dynamically?
    By anniejose in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Apr 2008, 11:12 PM

Thread Participants: 2

Tags for this Thread