View Full Version : .NET Webservice response to a TreeLoader

4 Mar 2010, 8:34 AM
I am trying to use the TreePanel with a .NET WebService in the same way as in the ExtJS example: http://www.extjs.com/deploy/dev/examples/tree/two-trees.html (http://www.extjs.com/forum/../deploy/dev/examples/tree/two-trees.html).

According to the TreeLoader API documentation (Yes Animal, I'm trying to use it) the result from the server needs to be JSON formatted. A .NET service can be configured to return JSON formatted text.

The request sent from ExtJS has the following request-header-attributes:

X-Requested-With: XMLHttpRequest
Content-Type:application/x-www-form-urlencoded; charset=UTF-8

Anyway, I recieve an answer XML formatted from the webservice, which normally responds in JSON. Can anyone tell me how to get a JSON formatted response from the webservice using the TreeLoader?

According to posts from ExtJS 1.x and ExtJS 2.x, various extendings or similar has been proposed. Is this really necessary just to use a TreeLoader with .NET?

Thanks in advance, Casper

4 Mar 2010, 12:16 PM
I'm fairly new to this also, but have just reached a stage where I can get ExtJS to talk to a vs2008 web service. I can't vouch for whether or not the following code is best-practice!, but it works for me so maybe it helps some.


using System;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Services;

[WebService(Namespace = "http://somedomain.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
public class Service : System.Web.Services.WebService
public Service () {

//Uncomment the following line if using designed components

[ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString=false)]
public Product[] getProductList(AuthDetails auth)
Product[] list = null;
if (auth.username != null &&
auth.username.Equals("me") &&
auth.password != null &&
list = new Product[] {
new Product(123, "Product 1"),
new Product(456, "Product 2"),
new Product(789, "Product 3")
list = new Product[] {
new Product(-1, "[bad auth]")
return list;

public class AuthDetails
public string username = null;
public string password = null;

public class Product
public Product() { }
public Product(int id, string name)
this.id = id;
this.product_name = name;
public int id = -1;
public string product_name = "";
And the ExtJS side (which I'm loading into a combobox) looks like:

var products = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'd',
fields: ['id', 'product_name'],
id: 'id'
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/getProductList',
jsonData: { // why isn't this property documented?
auth: {
username: 'me',
password: 'foo'
headers: {'Content-type': 'application/json'} // seems not to make a difference, but i'm told it's important!
//method: 'post' // seems to be redundant

I am a little concerned that the jsonData property isn't documented; hopefully that's just a documentation-sync thing and not because the property is deprecated!

There's also an example using GET instead of POST at http://www.codeproject.com/KB/webservices/ExtJS__WebServices.aspx that I found helpful in getting this far.

rgds, jlmt