PDA

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



Manoj.Aggarwal
12 Jul 2012, 8:59 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 ?

scottmartin
13 Jul 2012, 9:48 PM
Please format your code blocks.

Scott.

Manoj.Aggarwal
14 Jul 2012, 7:23 AM
Hi ,
Thanks for the reply.

Here below is the formated 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 code
});


// End of ready function.

This code is almost 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"}]
}

scottmartin
14 Jul 2012, 8:22 AM
So you will know, to format your code, please use

(no spaces)

[ code ]
// your code here
[ /code ]

Scott.

Manoj.Aggarwal
15 Jul 2012, 11:54 PM
Hello Scott,

Thanks for formatting it . Can you help me in looking why my tree is not updating ?? . I debuged it using callback of store.load() i.e


myStore.load({

callback: function(records, operation, success) {


}
}
)



I see my data in records[0].raw .

Manoj.Aggarwal
16 Jul 2012, 6:59 AM
Found the problem-:

Changed store to this -:


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
}
});