PDA

View Full Version : [CLOSED] Migrating to 2: TreePanel loader



PhilG
May 18, 2012, 9:16 AM
Here is my old markup from v1:


<ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300"
EnableDD="true" DDGroup="tree" Region="Center" RootVisible="false" AnchorVertical="100%"
AnchorHorizontal="100%" Icon="BookOpen" Animate="false" AutoScroll="true" UseArrows="true"
ContainerScroll="true" ContextMenuID="TreeContextMenu">
<Loader>
<ext:WebServiceTreeLoader DataUrl="/LocationData/GetPhysicalStructure/" Json="true">
<BaseParams>
<ext:Parameter Name="type" Value="#{TreePanel1}.menuNode ? #{TreePanel1}.menuNode.id : ''"
Mode="Raw" />
</BaseParams>
<Listeners>
<BeforeLoad Fn="Cablesense.setTypeOfLoadingNode" />
<Load Fn="Cablesense.handleTreeNodesLoaded" />
</Listeners>
</ext:WebServiceTreeLoader>
</Loader>
<Root>
<ext:AsyncTreeNode NodeID="0" Text='<%# ViewBag.CompanyName %>' Expanded="true" Icon="World">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="company" Mode="Value">
</ext:ConfigItem>
</CustomAttributes>
</ext:AsyncTreeNode>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="5500" />
</BottomBar>
<Listeners>
<ContextMenu Fn="Cablesense.setupContextMenu" />
<Click Fn="Cablesense.handleTreeNodeClicked" />
<ExpandNode Fn="Cablesense.handleTreeNodeExpanded" />
<CollapseNode Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" />
<Load Fn="Cablesense.treeDataLoaded" />
<MoveNode Fn="Cablesense.handleTreeNodeMove" />
</Listeners>
<DropConfig>
</DropConfig>
</ext:tTreePanel>
</Items>
</ext:Panel>

I'm trying to migrate this to V2, with all sorts of problems:

1) I can't use BaseParams in the Loader any more, since there is no loader - is ExtraParams the right replacement in my sample below?
2) I am getting an error "MainContent_MainPanel_TreePanel1 is not defined" coming from the code in that Extraparameter - how can I reference "TreePanel1" - I am using master pages which explains how that ID is derived, but I don't know how to reference it. I tried setting the NameSpace = "" on the resource manager but that doesn't help
3) How do I set the root node to be async - I can't see a "type" property of node.

Here's my new code so far:


<ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300"
EnableDD="true" DDGroup="tree" Region="Center" RootVisible="false" AnchorVertical="100%"
AnchorHorizontal="100%" Icon="BookOpen" Animate="false" AutoScroll="true" UseArrows="true"
ContainerScroll="true">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/LocationData/GetPhysicalStructure" Json="true">
<ExtraParams>
<ext:Parameter Name="type" Value="#{TreePanel1}.menuNode ? #{TreePanel1}.menuNode.id : ''" Mode="Raw" />
</ExtraParams>
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader>
<CustomConfig>
<ext:ConfigItem Name="getResponseData" Value="getJsonResponseData" Mode="Raw" />
</CustomConfig>
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Listeners>
<BeforeLoad Fn="Cablesense.setTypeOfLoadingNode" />
<Load Fn="Cablesense.handleTreeNodesLoaded" />
<BeforeItemContextMenu Fn="Cablesense.setupContextMenu" />
<CellClick Fn="Cablesense.handleTreeNodeClicked" />
<BeforeExpand Fn="Cablesense.handleTreeNodeExpanded" />
<BeforeCollapse Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" />
<Load Fn="Cablesense.treeDataLoaded" />
<Move Fn="Cablesense.handleTreeNodeMove" />
</Listeners>
<ToolTips>
</ToolTips>
<Root>
<ext:Node NodeID="0" Text='<%# ViewBag.CompanyName %>' Expanded="true" Icon="World">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="company" Mode="Value">
</ext:ConfigItem>
</CustomAttributes>
</ext:Node>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="5500" />
</BottomBar>
</ext:TreePanel>

Daniil
May 18, 2012, 10:55 AM
Hi,



1) I can't use BaseParams in the Loader any more, since there is no loader - is ExtraParams the right replacement in my sample below?


Please use the TreeStore Parameters instead.



2) I am getting an error "MainContent_MainPanel_TreePanel1 is not defined" coming from the code in that Extraparameter - how can I reference "TreePanel1" - I am using master pages which explains how that ID is derived, but I don't know how to reference it. I tried setting the NameSpace = "" on the resource manager but that doesn't help


It should work in TreeStore Parameters.



3) How do I set the root node to be async - I can't see a "type" property of node.


There is no AsyncNode class anymore. If a Node has no children, TreeStore just loads its children.

PhilG
May 18, 2012, 12:03 PM
Thanks for the response. Using the Parameters object of TreeStore seems to solve those issues, but now I'm finding that the nodes that I load do not appear in the tree. Markup:



<ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300"
EnableDD="true" DDGroup="tree" Region="Center" RootVisible="true" AnchorVertical="100%"
AnchorHorizontal="100%" Icon="BookOpen" Animate="false" AutoScroll="true" UseArrows="true"
ContainerScroll="true">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Parameters>
<ext:StoreParameter Name="type" Value="#{TreePanel1}.menuNode ? #{TreePanel1}.menuNode.id : 'Company'" Mode="Raw" />
</Parameters>
<Proxy>
<ext:AjaxProxy Url="/LocationData/GetPhysicalStructure" Json="true">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader>
<CustomConfig>
<ext:ConfigItem Name="getResponseData" Value="getJsonResponseData" Mode="Raw" />
</CustomConfig>
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Listeners>
<BeforeExpand Fn="Cablesense.handleTreeNodeExpanded" />
<BeforeCollapse Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" />
<Load Fn="Cablesense.treeDataLoaded" />
<Move Fn="Cablesense.handleTreeNodeMove" />
</Listeners>
<ToolTips>
</ToolTips>
<Root>
<ext:Node NodeID="0" Text='<%# ViewBag.CompanyName %>' Expanded="false" Icon="World">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="company" Mode="Value">
</ext:ConfigItem>
</CustomAttributes>
</ext:Node>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="5500" />
</BottomBar>
</ext:TreePanel>


My "GetPhysicalStructure" method is returning the following content:



"[{id:\"site115\",expanded:true,iconCls:X.net.RM.getIcon(\"SitemapColor\"),text:\" Incubator\",type:\"site\"}]"


And the getJsonResponseData (which I'm not sure why I need - I just copied it from your example ;) ) :



function getJsonResponseData(response) {
console.log(response);
try {
return this.readRecords(Ext.decode(Ext.decode(response.re sponseText)));
} catch (ex) {
var error = new Ext.data.ResultSet({
total: 0,
count: 0,
records: [],
success: false,
message: ex.message
});

this.fireEvent('exception', this, response, error);

return error;
}
}


No JS error occurs, but I don't see the nodes appear - although expanding the root node does fetch the json

Thanks

Daniil
May 18, 2012, 12:14 PM
Please clarify what is the reason you override the getResponseData method?

<ext:ConfigItem Name="getResponseData" Value="getJsonResponseData" Mode="Raw" />

PhilG
May 18, 2012, 12:17 PM
Please clarify what is the reason you override the getResponseData method?

Sorry, I don't know :) I just did that because it was what you were doing in the example (http://examples2.ext.net/#/TreePanel/Loaders/WebService/) and I assumed I would need to do the same. Will try without

PhilG
May 18, 2012, 12:21 PM
Hi,

Removing this js and just having the following doesn't work either - again the service is called and the json is returned but no nodes are added



<ext:AjaxProxy Url="/LocationData/GetPhysicalStructure" Json="true">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader>
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>

Daniil
May 18, 2012, 12:36 PM
Yes, you should remove it. It's required for WebServices only.

Also please remove Reader at all.

If the issue persists, please post a response of the load request.

PhilG
May 18, 2012, 12:59 PM
Hi,

I removed the <Reader> - still getting the issue. My json request looks like this:

Header:


Cache-Control:private
Content-Length:135
Content-Type:application/json; charset=utf-8
Date:Fri, 18 May 2012 12:57:40 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:4.0
X-Powered-By:ASP.NET


Response text:


"[{id:\"site115\",expanded:true,iconCls:X.net.RM.getIcon(\"SitemapColor\"),text:\"University of Manchester Incubator\",type:\"site\"}]"

The controller action that fires this builds up a NodeCollection, and adds Node objects, before calling the .ToJson on the NodeCollection.

Daniil
May 18, 2012, 2:17 PM
Could you post the controller action?

PhilG
May 18, 2012, 2:23 PM
No problem, had to edit slightly to remove business functionality, but here it is



public ActionResult GetPhysicalStructure(string type, string node, PhysicalStructureOptions options = PhysicalStructureOptions.None)
{
NodeCollection nodes = new NodeCollection(false);

var sites = _physicalStructureRepo.GetSites();

foreach (Site site in sites)
{
Node asyncNode = new Node();
asyncNode.Text = site.FullName;
asyncNode.NodeID = "site" + site.SiteId.ToString();
asyncNode.Icon = Icon.SitemapColor;
asyncNode.CustomAttributes.Add(new ConfigItem("type", "\"site\""));
asyncNode.Expanded = false;
nodes.Add(asyncNode);
}
break;

JsonResult result = Json(nodes.ToJson());
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;

}

Daniil
May 18, 2012, 2:44 PM
Please replace

JsonResult result = Json(nodes.ToJson());
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
with

return Content(nodes.ToJson());

PhilG
May 18, 2012, 3:24 PM
Aha - that sorted it, thanks very much for the assistance.