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
    795
    Vote Rating
    37
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar