View Full Version : Loading the Json Result in TreePanel

15 Mar 2011, 5:17 AM
I need some help.
I am using asp.net MVC with EF4 and want to load the JsonResult in treepanel. I checked out for the link: http://www.sencha.com/forum/showthread.php?102436-passing-data-from-java-class-to-ExtJs-treepanel
where i came to know that i have to override the treeloader and then inject your own createNode(obj) method to get the proper format as required by treepanel. I tried to override the Treeloader as mentioned in the link but it gives a Open / Save dialog box with the json result which i am sending from the server.
I think there is some problem in the override function that i have mentioned below?
the json result that i get when i open the pop up box returned from server is as below -

[{"id":21,"text":"Arrigoni Ellen","leaf":true},{"id":22,"text":"Beilby Paige Denise","leaf":true},{"id":32,"text":"Bell Ken James","leaf":true},{"id":311,"text":"Brien Kelsey Leigh","leaf":true},{"id":45,"text":"Campbell Scott Richard","leaf":true},{"id":91,"text":"Chen Hueyfang","leaf":true},{"id":93,"text":"Figaro Christopher Michael","leaf":true},{"id":113,"text":"Fitzgerald Joseph OConnor","leaf":true},{"id":201,"text":"Heriveaux Marlange","leaf":true},{"id":301,"text":"MacKenzie Davin S","leaf":true},{"id":312,"text":"Sarfatti Aaron Joseph","leaf":false},{"id":313,"text":"Wu Ichan John","leaf":false},{"id":314,"text":"Xia Diwei","leaf":false},{"id":315,"text":"Zhao Jingjing","leaf":false}]
My ExtJs Treeloader Override function and the treepanel code -

Ext.override(Ext.tree.TreeLoader, {
processResponse: function (response, node, callback, scope) {
var json = response.responseText,
i = 0,
try {
if (!(children = response.responseData)) {
children = Ext.decode(json);
if (this.root) {
if (!this.getRoot) {
this.getRoot = Ext.data.JsonReader.prototype.createAccessor(this.root);
children = this.getRoot(children);
for (len = children.length; i < len; i++) {
if (newNode = this.createNode(children[i])) {
this.runCallback(callback, scope || node, [node]);
} catch (e) {

var treeloader = new Ext.tree.TreeLoader({
id: 'treeloader',
dataUrl: 'Employee/Index', // Controller /Action that sends the json result.
createNode: function(obj) {
return new Ext.tree.AsyncTreeNode({
id: obj.id,
text: obj.text,
leaf: obj.leaf

var Tree = Ext.tree;

tree = new Tree.TreePanel({
title: 'My TreePanel',
id: 'treepanel',
autoScroll: true,
animate: true,
enableDD: false,
containerScroll: true,
loader: treeloader,
rootVisible: false,
root: {
nodeType: 'async',
text: 'Employees',
id: 'source'
listeners: {
contextmenu: onCtxMenu
Controller /Action code that sends the json result -
public JsonResult Index()
System.Text.StringBuilder returnValue = new System.Text.StringBuilder();

string message = string.Empty;
EmployeesEntities db = new EmployeesEntities();

var query = db.Employees.Where(row => row.SupervisorID == null || row.SupervisorID == 0)
.Select(row => new { id = row.EmployeeID, text = row.FirstName + " " + row.LastName, leaf = row.Employee1.Any() })
.OrderByDescending(row => row.leaf)
.ThenBy(row => row.text);

return Json(query,JsonRequestBehavior.AllowGet);

16 Mar 2011, 4:32 AM
Well i figured it out actually the Json method returns the Json object instead of json string which is required by the treepanel and so i changed it to JavaScriptSerializer

using System.Web.Script.Serialization;
public void LoadEmployee()
JavaScriptSerializer serializer = new JavaScriptSerializer();
message = serializer.Serialize(query);

I removed the Treeloader Override as what i was getting from server using Javascript serializer is JavaScript Array whose elements are node definition objects.

I changed the treeloader defaultUrl to 'Employee/LoadEmployee',
var treeloader = new Ext.tree.TreeLoader({
id: 'treeloader',
dataUrl: 'Employee/LoadEmployee', // Controller /Action that sends the json result.