PDA

View Full Version : Ext Js - TreeStore not loading data when using ASP.net WCF Service-



Manoj.Aggarwal
12 Jul 2012, 8:28 PM
Hi ,

I know this question would have been asked many times. I searched over google , sencha everywhere and everything with with my code seems fine. But it is not working .

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'
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function () {
tree.getEl().mask('Expanding tree...');
var toolbar = this.up('toolbar');
toolbar.disable();
tree.expandAll(function () {
tree.getEl().unmask();
toolbar.enable();
});
}
}, {
text: 'Collapse All',
handler: function () {
var toolbar = this.up('toolbar');
toolbar.disable();
tree.collapseAll(function () {
toolbar.enable();
});
}
}]
}]
});
});
This code is copy paste of reorder.js but with service url of my WCF service-:

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 ?