View Full Version : Loading a treepanel from a webmethod call

8 Mar 2010, 5:16 AM

I am trying to figure out how to load a tree panel in my application via a webmethod call which returns the child items in a JSON formatted string.

I am having problems getting the returned string from my webmethod call to be used as the items for the tree panel.

Ext.onReady(function() {
// write your application here

var miframe = new Ext.ux.ManagedIFramePanel({
id: 'miframe',
border: false,
bodyBorder: false,
header: false
new Ext.Viewport({
layout: 'border',
items: [{
//title: 'North Panel',
region: 'north',
//margins: '0 0 5 0',
html: '<table width="100%"><tr><td style="width: 420px;"><img src="Images/PPextranetbanner.jpg"></td><td style="text-align: right;width:50%"><img src="Images/Bannerrighthandside.jpg"></td></tr></table>',
height: 120,
bbar: new Ext.Toolbar({
buttonAlign: 'right',
xtype: 'tbtext',
id: 'txtLoggedInAs',
text: 'Logged in as: '
new Ext.Button({
text: 'Logout',
handler: function() {
Ext.Msg.confirm("Confirm Logout", "Are you sure you want to logout?", function(e) { if (e=='yes') return false }, this);
scope: this,
cls: 'x-btn-over'
autoHeight: true,
hideBorders: true
region: 'west',
title: 'Menu',
id: 'mainMenu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({dataUrl: 'WebService.asmx/HelloWorld'}),
}, {
xtype: 'container',
autoEl: {},
layout: 'fit',
id: 'centerRegion',
region: 'center',

items: [miframe]


My webmethod code is as follows:

[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public string HelloWorld() {
StringBuilder sb = new StringBuilder();
sb.Append("{ text: 'Home', leaf: 'true', href: 'Home.aspx', hrefTarget: 'miframe' },");
sb.Append("{ text: 'Customers', false: 'true',");
sb.Append("children: [");
sb.Append("{text: 'Add New Customer', leaf: 'true', href: 'Customers.aspx', hrefTarget: 'miframe'},");
sb.Append("{text: 'Amend Existing Customer', leaf: 'true', href: 'CustomersEdit.aspx', hrefTarget: 'miframe'}");
sb.Append("{ text: 'Users', leaf: 'true' },");
sb.Append("{ text: 'Units', leaf: 'true' }");

return sb.ToString();

I get an error in Firebug telling me no root item has been set. Reading through various posts and tutorials, I understand the point in have a root node. Also I see many example using tehniques where calls are made to the server to retrieve only the required nodes when expanding a parent node. In my case I am dealing with static items which I just build up server side on the initial page load.

I tried the below config items on my tree panel but all that happens is the Root node gets displayed and none of my other items from my webmethod call gets displayed, although Firebug does show the call being made and the data being retrieved.

loader: new Ext.tree.TreeLoader({dataUrl: 'WebService.asmx/HelloWorld'}),
root: new Ext.tree.AsyncTreeNode({
text: 'Root',

No doubt I am doing something stupid, please advise!