PDA

View Full Version : Help me with my tree please



parky128
12 Mar 2010, 1:25 AM
Hello,

I am trying to load a TreePanel based on the response from a call to a web method. The web method is as follows:



[WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public string GetMenuItems() {
StringBuilder sb = new StringBuilder();
sb.Append("[");
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("]},");
sb.Append("{ text: 'Users', leaf: 'true' },");
sb.Append("{ text: 'Units', leaf: 'true' }");
sb.Append("]");

return sb.ToString();
}


For my ExtJS code I am trying to display the treepanel in my west region of my viewport



{
region: 'west',
title: 'Menu',
id: 'mainMenu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.ux.XmlTreeLoader({dataUrl:'Service.asmx/GetNodes'})
}


When running the code, I get an error informing me no root has been defined. I understand I need a root according to the docs so have tried things like:



root: {
//nodeType: 'async',
text: 'Menu',
draggable: false,
id: 'source'
},
rootVisible: false


But I just get nothing displayed in my west region. Am I right in saying I would not want an 'async' root node as I am just using static data from my web method call and so would just be loading it into the tree once?

Please advise.

Thanks, Rob

keydot
12 Mar 2010, 1:49 AM
i think your loader is not correct
try
loader:new Ext.tree.TreeLoader({dataUrl:'menu.action'}),

parky128
12 Mar 2010, 2:02 AM
Yes sorry you are right, my code is actually:



{
region: 'west',
title: 'Menu',
id: 'mainMenu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({dataUrl:'Service.asmx/GetMenuItems'}),
root: {
//nodeType: 'async',
text: 'Menu',
draggable: false,
id: 'source'
},
rootVisible: false
}


But still nothing appears. If I comment out the root config I get the error 'this.root is undefined', so I know I need to define this.

Would I actually need to call the web method as part of the root config?

Zdeno
12 Mar 2010, 2:07 AM
Did you try something like this:



...
,root: new Ext.tree.AsyncTreeNode({
text: 'Root Node'
,draggable:false
,id:'root-node'
,expanded:true
})
...

keydot
12 Mar 2010, 2:15 AM
i suggest you use FireBug to get the server-side response string
did you really get the data?

parky128
12 Mar 2010, 2:22 AM
Interestingly, no I actually don't get the data according to Firebug.

However...

I have tried the dataUrl config option as I have seen this in use in other examples:



{
region: 'west',
title: 'Menu',
id: 'mainMenu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
dataUrl: 'WebService.asmx/GetMenuItems',
root: new Ext.tree.AsyncTreeNode({
text: 'Root Node'
,draggable:false
,id:'root-node'
,expanded:true
})
}


This just displays the 'Root Node' item but none of the other items from my webmethod call. In Firebug I am getting a response back now, but its coming through as XML:


<?xml version="1.0" encoding="utf-8"?><string xmlns="http://tempuri.org/">[{ text: 'Home', leaf: 'true', href: 'Home.aspx', hrefTarget: 'miframe' },{ text: 'Customers', false: 'true',children: [{text: 'Add New Customer', leaf: 'true', href: 'Customers.aspx', hrefTarget: 'miframe'},{text: 'Amend Existing Customer', leaf: 'true', href: 'CustomersEdit.aspx', hrefTarget: 'miframe'}]},{ text: 'Users', leaf: 'true' },{ text: 'Units', leaf: 'true' }]</string>

Should I be encoding the response in JSON? If so, how would I do that?

keydot
12 Mar 2010, 2:32 AM
yes you should use json
and the url must response format like this:
[{ text: 'Home', leaf: 'true', href: 'Home.aspx', hrefTarget: 'miframe' },{ text: 'Customers', false: 'true',children: [{text: 'Add New Customer', leaf: 'true', href: 'Customers.aspx', hrefTarget: 'miframe'},{text: 'Amend Existing Customer', leaf: 'true', href: 'CustomersEdit.aspx', hrefTarget: 'miframe'}]},{ text: 'Users', leaf: 'true' },{ text: 'Units', leaf: 'true' }]

steffenk
12 Mar 2010, 2:33 AM
check out this example using xml:
http://www.extjs.com/deploy/dev/examples/tree/xml-tree-loader.html

parky128
12 Mar 2010, 2:46 AM
I have seen this example before and tried to apply the same technique.

So now I have:



{
region: 'west',
title: 'Menu',
id: 'mainMenu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.ux.tree.XmlTreeLoader({
dataUrl:'WebService.asmx/GetMenuItems'
})
}


But all that happens is a folder icon displays where the tree panel is. I expand it, and another folder appears, and so on and so on, just displaying folders everytime and never the nodes from my web method call. I am getting an xml response each time I expand a folder from the server as below



<string xmlns="http://tempuri.org/">
"[{ text: 'Home', leaf: 'true', href: 'Home.aspx', hrefTarget: 'miframe' },{ text: 'Customers', false: 'true',children: [{text: 'Add New Customer', leaf: 'true', href: 'Customers.aspx', hrefTarget: 'miframe'},{text: 'Amend Existing Customer', leaf: 'true', href: 'CustomersEdit.aspx', hrefTarget: 'miframe'}]},{ text: 'Users', leaf: 'true' },{ text: 'Units', leaf: 'true' }]"

</string>






I feel I am very close, just not sure how to resolve!

steffenk
12 Mar 2010, 3:09 AM
you have strange response, it's a json string encapsulated with xml.
Do you have a chance to change that? Response should be pure json or pure xml.

snoosel11
5 May 2010, 11:14 AM
Hi parky128,

I have always the same trouble with the books example. When I remove or comment the highlighted line out as shown below then no leafs will be displayed just the folders. Do you have an approach right now or could anybody provide a solution to load the data asynchronously?

Thanks,
Mario
// Override these values for our folder nodes because we are loading all data at once. If we were
// loading each node asynchronously (the default) we would not want to do this:
//attr.loaded = true;
attr.expanded = true;

eugs51
6 May 2010, 7:09 PM
Dont return a string, return the object, then use the AsyncTreeLoader


public string GetMenuItems() {