[CLOSED] Migrating to 2: TreePanel loader

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Migrating to 2: TreePanel loader

    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>
    Last edited by Daniil; May 18, 2012 at 4:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by PhilG View Post
    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.

    Quote Originally Posted by PhilG View Post
    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.

    Quote Originally Posted by PhilG View Post
    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.
  3. #3
    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.responseText)));
          } 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
  4. #4
    Please clarify what is the reason you override the getResponseData method?
    <ext:ConfigItem Name="getResponseData" Value="getJsonResponseData" Mode="Raw" />
  5. #5
    Quote Originally Posted by Daniil View Post
    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 (https://examples2.ext.net/#/TreePane...rs/WebService/) and I assumed I would need to do the same. Will try without
  6. #6
    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>
  7. #7
    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.
  8. #8
    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.
    Last edited by Daniil; May 18, 2012 at 2:16 PM. Reason: Please use [CODE] tags for all code
  9. #9
    Could you post the controller action?
  10. #10
    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;
    
    }
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Migrating to 2: PartialViewResult
    By PhilG in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 21, 2012, 9:27 AM
  2. [CLOSED] Migrating a MVC App from v1 to v2
    By RCN in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 10, 2012, 7:05 PM
  3. TreePanel - load root with loader
    By pintun in forum 1.x Help
    Replies: 2
    Last Post: Apr 14, 2010, 8:19 PM
  4. TreePanel Ajax Method Loader by code
    By Mickna in forum Examples and Extras
    Replies: 6
    Last Post: Jan 05, 2010, 11:34 PM
  5. Replies: 5
    Last Post: May 13, 2009, 12:10 PM

Tags for this Thread

Posting Permissions