Question

I am trying to build a dynamic tree. I am getting my data from a C# WCF Service. It is returning me JSON data , but data is not reflecting in tree.
I am using EXTJS 4.

.Js Code –

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.tip.*'
 ]);    

Ext.onReady(function () {
    Ext.QuickTips.init();

var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
                 type: 'ajax',
                 url: 'Services/InfographicsDataService.svc/GetTree'
               },
        root: {
                 text: 'Ext JS',
                 id: 'src',
                 expanded: true
              },
      reader: {
                 type: 'json',
                 root: 'd'
              }
    }); //  End of store code       

    var tree = Ext.create('Ext.tree.Panel', {
             store: store,
             viewConfig: 
             {
                plugins:{ ptype: 'treeviewdragdrop' }
             },
        renderTo: 'tree-div',
        height: 300,
        width: 250,
        title: 'Files',
        useArrows: true
    }); // End of tree    
}); // End of ready function   

This is the code at my service end-::

[OperationContract]
[WebGet]
 public List<TreeNode> GetTree()
 {
   List<TreeNode> nodes = new List<TreeNode>();
      nodes.Add(new TreeNode() { id="src/ModelManager.js", text = 
     "ModelManager.js" });

       nodes.Add(new TreeNode() { id="src/data", text = "data" });
      nodes.Add(new TreeNode() { id="src/draw", text = "draw" });
      return nodes;
 }

Json returned by wcf service–

{"d":[
  {
    "__type":"TreeNode:#Infographics.Services.Model",
    "id":"src\/ModelManager.js",
    "leaf":false,
    "text":"ModelManager.js"    
  },
 { 
   "__type":"TreeNode:#Infographics.Services.Model",
   "id":"src\/data",
   "leaf":false,
   "text":"data"
 },
 {
   "__type":"TreeNode:#Infographics.Services.Model",
   "id":"src   \/draw",
   "leaf":false,
   "text":"draw"
 }]
}

Call is going to server and returning the data but not adding nodes in tree
Page is showing just the root Extjs node.

Initially I thought , it is just root property of reader which I need to set to “d” , but there is something more I am missing.

Can somebody help me in finding what is that small mistake I am making ?

Answer 1

Can you change the store like this and try,

var store = Ext.create('Ext.data.TreeStore', 
{
  proxy: 
  {
     type: 'ajax',
     url: 'Services/InfographicsDataService.svc/GetTree',
     reader: 
     {
        type: 'json',
        root: 'd'
     }
  },
  root:
  {
     text: 'Ext JS',
     id: 'src',
     expanded: true
  }  
});