Loading Tree from JSON obejct

[msmolyak]

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).

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

[westy]

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?

[msmolyak]

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.

[Nickname]

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"

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


    var store = new Ext.data.TreeStore({
        autoLoad: true,
        model: 'TreeMenuNode',
        data : {
            root: {
                id: 1,
                text: 'hallo'
            }
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'root'
            }
        },
        root: {
            text: 'Ext JS',
            id: 'src',
            expanded: true
        },
        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',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        useArrows: true,
        rootVisible: true,
        store: store,
    });
}); 

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

dataRoot = reader.getRoot(root);
...
if (dataRoot) {
    children = reader.extractData(dataRoot);
    this.fillNode(root, children);
} 

"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

if (!config.model && !config.fields) {
    config.fields = [{name: 'text', type: 'string'}];
}