[CLOSED] TreePanel very slow at loading & expanding ~250 nodes after ajax call to get nodes

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] TreePanel very slow at loading & expanding ~250 nodes after ajax call to get nodes

    I currently have an .Net MVC controller method that returns about 250 nodes.

    When I get the nodes back from an ajax call I execute this JavaScript to load the nodes in the tree (the tree has 7 columns):

        treePanel.setRootNode(nodes[0]);
        treePanel.getRootNode().expand(true);
    Right now to load and expand approx 250 nodes it takes ~10s under Chrome (which is probably the fastest browser along with Safari).

    In Ext.Net 1.x I used this code and it was much, much faster, a second or two.

      if (nodes.length > 0)
        {
          treeGrid.initChildren(nodes);
        }
        else
        {
          treeGrid.getRootNode().removeChildren();
        }
       treeGrid.getRootNode().expand(true);
    So, why is it so slow? Did you experience the same thing? Obviously I cannot use this method to load the tree. Would using a store be any faster? I am actually quite shocked. What can be done to make it faster?

    I will experiment tomorrow more and I will probably create a sample.

    Thanks
    Last edited by Daniil; Jan 23, 2013 at 3:28 PM. Reason: [CLOSED]
  2. #2
    Hello!

    I couldn't reproduce your problem. I've used following code:

    Index.cshtml
    @{
        ViewBag.Title = "TreePanel using DirectMethod";
        Layout = "~/Views/Shared/_BaseLayout.cshtml";
    }
    
    @section headtag
    {
        <script>
            var nodeLoad = function (store, operation, options) {
                var node = operation.node;
    
                App.direct.NodeLoad("new-root", {
                    success : function (result) {
                        App.TreePanel1.setRootNode(result[0]);
                        App.TreePanel1.getRootNode().expand(true);
                    },
    
                    failure : function (errorMsg) {
                        Ext.Msg.alert('Failure', errorMsg);
                    }
                });
    
                return false;
            };
        </script>
    }
    
    @section example
    {
        <h1>TreePanel using DirectMethod</h1>
        @(
            Html.X().TreePanel()
                .ID("TreePanel1")
                .Title("Tree")
                .Width(300)
                .Height(450)
                .Border(false)
                .Root(Html.X().Node().NodeID("0").Text("Old Root"))
                .Listeners(l => { l.BeforeLoad.Fn = "nodeLoad"; })
        )
    }
    Controller:

    [DirectController]
    public class TestController : Controller
    {
    	public ActionResult Index() {
    		return View();
    	}
    
    	[DirectMethod]
    	public ActionResult NodeLoad(string node)
    	{
    		NodeCollection nodes = new Ext.Net.NodeCollection();
    		Node root = new Node();
    		root.Text = node;
    		root.NodeID = node;
    		nodes.Add(root);
    
    		for (int i = 0; i < 250; i++)
    		{
    			Node treeNode = new Node();
    			treeNode.Text = i.ToString();
    			treeNode.NodeID = node + i;
    			treeNode.Leaf = true;
    			root.Children.Add(treeNode);
    		}
    
    		return this.Direct(nodes);
    	}
    }
  3. #3
    Sorry, my bad, my tree had 391 nodes (I originally estimated the number of nodes visually because it was too late...)

    Here is the sample that will allow you to reproduce this:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
      <head id="Head1" runat="server">
        <title>Test tree panel speed Ext.net 2.x</title>
        
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
          function loadTree()
          {
            App.treePanel.el.mask('Loading...', 'x-mask-loading');
            Ext.Ajax.request(
            {
              url: 'data.json',
              method: 'GET',
              params:{},
    
              success: function onSuccess(result, request) {
                onTreeDataLoad(App.treePanel, result);
              },
              failure: function (result, request) {
                App.treePanel.el.unmask();
                Ext.net.DirectEvent.showFailure(result);
              }           
            });
          }
          
          function onTreeDataLoad(treePanel, result)
          {
            var nodes = Ext.JSON.decode(result.responseText).result;  
            treePanel.setRootNode(nodes[0]);
            treePanel.getRootNode().expand(true);
            treePanel.el.unmask();
          }
          
        </script>
      </head>
      <body>
        <form id="Form1" runat="server">
          <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
          <ext:Viewport runat="server" Layout="fit">
            <Items>
              <ext:TreePanel ID="treePanel" 
                             runat="server"
                             Title="Test tree"
                             IDMode="Static"
                             UseArrows="true"
                             RootVisible="True"
                >
                <TopBar>
                  <ext:Toolbar runat="server">
                    <Items>
                      <ext:Button runat="server" Text="Load Tree" >
                        <Listeners>
                          <Click Handler="loadTree();"></Click>
                        </Listeners>
                      </ext:Button>
                    </Items>
                  </ext:Toolbar>          
                </TopBar>
                <Fields>                    
                  <ext:ModelField Name="Tag" Type="String" />
                  <ext:ModelField Name="TagInstance" Type="Int" />
                  <ext:ModelField Name="State" Type="String" />
                  <ext:ModelField Name="StateId" Type="Int" />
                  <ext:ModelField Name="Command" Type="String" />
                  <ext:ModelField Name="HasNotes" Type="String" />
                  <ext:ModelField Name="IsUsedByACanvas" Type="String" />
                  <ext:ModelField Name="PerformanceIndicatorId" Type="Int" />
                </Fields>
                <ColumnModel>
                  <Columns>
                    <ext:TreeColumn ID="TreeColumn1" 
                                    runat="server"
                                    Text="Title" 
                                    Width="250"                                
                                    Sortable="false"
                                    DataIndex="text" />
    
                    <ext:Column ID="CommandColumn" runat="server" DataIndex="Command" Text="&nbsp;" Width="30" Sortable="false"></ext:Column>
                    <ext:Column ID="TagColumn" runat="server" DataIndex="Tag" Text="Tag" Width="80" Sortable="false"></ext:Column>
                    <ext:Column ID="TagInstanceColumn" runat="server" DataIndex="TagInstance" Text="Tag Instance" Width="100" Sortable="false"></ext:Column>
                    <ext:Column ID="StateColumn" runat="server" DataIndex="State" Text="State" Width="130" Sortable="false"></ext:Column>
                    <ext:CheckColumn ID="HasNotesColumn" runat="server" DataIndex="HasNotes" Text="Has Notes" Sortable="false" Width="90" Align="Center"></ext:CheckColumn>
                    <ext:CheckColumn ID="IsUsedByACanvasColumn" runat="server" DataIndex="IsUsedByACanvas" Text="Used by a Canvas" Sortable="false" Width="120" Align="Center"></ext:CheckColumn>
                  </Columns>    
    
                </ColumnModel>
                
                <Root>
                  <ext:Node NodeID="0" Text="Root" Leaf="True"></ext:Node>
                </Root>
                
                
              </ext:TreePanel>        
            </Items>
          </ext:Viewport>
        </form>
      </body>
    </html>
    The sample accesses a data.json file that I could not attach due to your extension & file size policy. However, you can get it from here: https://dl.dropbox.com/u/35370420/data.json. Save it in the same folder with the page.

    I am going to work on an Ext.Net 1.x sample so you can see clearly the difference in speed.
    Last edited by bogc; Dec 12, 2012 at 7:13 PM.
  4. #4
    Here is the sample for Ext.Net 1.x. It won't render the checkboxes but that's fine. Use the same data.json file (you need to save it in the same folder as the page). The speed difference between the two is huge. I think it is a problem with Ext Js 4.1. I really hope that we can turn off some events and the performance is back in the other sample as well.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
      <head id="Head1" runat="server">
        <title>Test TreeGrid speed Ext.NET 1.x</title>
        
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <script>
          function loadTree()
          {
            treePanel.el.mask('Loading...', 'x-mask-loading');
            Ext.Ajax.request(
            {
              url: 'data.json',
              method: 'GET',
              params:{},
    
              success: function onSuccess(result, request) {
                onTreeDataLoad(result);
              },
              failure: function (result, request) {
                treePanel.el.unmask();
                Ext.net.DirectEvent.showFailure(result);
              }           
            });
          }
          
          function onTreeDataLoad(result)
          {
            var nodes = Ext.util.JSON.decode(result.responseText).result; 
            if (nodes.length > 0) {
              treePanel.initChildren(nodes);
            }
            else {
              treePanel.getRootNode().removeChildren();
            }
            treePanel.getRootNode().expand(true);
            treePanel.el.unmask();
          }
          
        </script>
      </head>
      <body>
        <form id="Form1" runat="server">
          <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
          <ext:Viewport runat="server" Layout="fit">
            <Items>
              <ext:TreeGrid ID="treePanel" 
                             runat="server"
                             Title="Test tree"
                             IDMode="Static"                                                                           
                             UseArrows="true"
                             RootVisible="false"                                                     
                >
                <TopBar>
                  <ext:Toolbar runat="server">
                    <Items>
                      <ext:Button ID="Button1" runat="server" Text="Load Tree" >
                        <Listeners>
                          <Click Handler="loadTree();"></Click>
                        </Listeners>
                      </ext:Button>
                    </Items>
                  </ext:Toolbar>          
                </TopBar>
                <Columns>
    
                  <ext:TreeGridColumn Header="Title" Width="250" DataIndex="text" />
    
                  <ext:TreeGridColumn DataIndex="Command" Header="&nbsp;" Width="30" ></ext:TreeGridColumn>
                  <ext:TreeGridColumn DataIndex="Tag" Header="Tag" Width="80" ></ext:TreeGridColumn>
                  <ext:TreeGridColumn DataIndex="TagInstance" Header="Tag Instance" Width="100" ></ext:TreeGridColumn>
                  <ext:TreeGridColumn DataIndex="State" Header="State" Width="130" ></ext:TreeGridColumn>
                  <ext:TreeGridColumn DataIndex="HasNotes" Header="Has Notes" Width="90" Align="Center"></ext:TreeGridColumn>
                  <ext:TreeGridColumn DataIndex="IsUsedByACanvas" Header="Used by a Canvas" Width="120" Align="Center"></ext:TreeGridColumn>
           
        
                </Columns>
                <Root>
                  <ext:TreeNode NodeID="0" Text="Root" Leaf="True"></ext:TreeNode>
                </Root>
                
                
              </ext:TreeGrid>        
            </Items>
          </ext:Viewport>
        </form>
      </body>
    </html>
    Last edited by bogc; Dec 12, 2012 at 7:14 PM.
  5. #5
    Just to let you know, I also posted this message on the sencha forum:

    http://www.sencha.com/forum/showthre...881#post920881
  6. #6
    Thank you for the example. However, we still couldn't reproduce your problem. Of course, loading and rendering so big amount of nodes take a time but not 10 seconds. In Chrome loading and rendering time is about 1.2 seconds in FireFox 2 seconds in case of loading 400 nodes. To measure the time we used the following sample. Please, try to use it and post the time of loading:

    Index.aspx

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Index</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True"
            ScriptMode="Debug">
        </ext:ResourceManager>
        <script>
            startTimeMs = 0;
            function loadTree() {
                App.treePanel.el.mask('Loading...', 'x-mask-loading');
                startTimeMs = new Date().getTime();
                Ext.Ajax.request(
                    {
                        url: '/Test/NodeLoad',
                        method: 'GET',
                        params: {},
    
                        success: function onSuccess(result, request) {
                            onTreeDataLoad(App.treePanel, result);
                        },
                        failure: function (result, request) {
                            App.treePanel.el.unmask();
                            Ext.net.DirectEvent.showFailure(result);
                        }
                    });
            }
    
            function onTreeDataLoad(treePanel, result) {
                var nodes = Ext.JSON.decode(result.responseText).result;
                treePanel.setRootNode(nodes[0]);
                treePanel.getRootNode().expand(true);
                treePanel.el.unmask();
            }
    
        </script>
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:TreePanel ID="treePanel" runat="server" Title="Test tree" IDMode="Static" UseArrows="true"
                    RootVisible="True">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Load Tree">
                                    <Listeners>
                                        <Click Handler="loadTree();">
                                        </Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Fields>
                        <ext:ModelField Name="Tag" Type="String" />
                        <ext:ModelField Name="TagInstance" Type="Int" />
                        <ext:ModelField Name="State" Type="String" />
                        <ext:ModelField Name="StateId" Type="Int" />
                        <ext:ModelField Name="Command" Type="String" />
                        <ext:ModelField Name="HasNotes" Type="Boolean" />
                        <ext:ModelField Name="IsUsedByACanvas" Type="Boolean" />
                        <ext:ModelField Name="PerformanceIndicatorId" Type="Int" />
                    </Fields>
                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn1" runat="server" Text="Title" Width="250" Sortable="false"
                                DataIndex="text" />
                            <ext:Column ID="CommandColumn" runat="server" DataIndex="Command" Text="&nbsp;" Width="30"
                                Sortable="false">
                            </ext:Column>
                            <ext:Column ID="TagColumn" runat="server" DataIndex="Tag" Text="Tag" Width="80" Sortable="false">
                            </ext:Column>
                            <ext:Column ID="TagInstanceColumn" runat="server" DataIndex="TagInstance" Text="Tag Instance"
                                Width="100" Sortable="false">
                            </ext:Column>
                            <ext:Column ID="StateColumn" runat="server" DataIndex="State" Text="State" Width="130"
                                Sortable="false">
                            </ext:Column>
                            <ext:CheckColumn ID="HasNotesColumn" runat="server" DataIndex="HasNotes" Text="Has Notes"
                                Sortable="false" Width="90" Align="Center">
                            </ext:CheckColumn>
                            <ext:CheckColumn ID="IsUsedByACanvasColumn" runat="server" DataIndex="IsUsedByACanvas"
                                Text="Used by a Canvas" Sortable="false" Width="120" Align="Center">
                            </ext:CheckColumn>
                        </Columns>
                    </ColumnModel>
                    <Root>
                        <ext:Node NodeID="0" Text="Root" Leaf="True">
                        </ext:Node>
                    </Root>
                    <Listeners>
                        <AfterItemExpand Handler="alert((new Date().getTime() - startTimeMs)/1000 + 'seconds');"></AfterItemExpand>
                    </Listeners>
                </ext:TreePanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    TestController:

    public class TestController : Controller
    {
    	public ActionResult Index() {
    		return View();
    	}
    
    	public ActionResult NodeLoad(string node)
    	{
    		NodeCollection nodes = new Ext.Net.NodeCollection();
    		Node root = new Node();
    		root.Text = node;
    		root.NodeID = node;
    		nodes.Add(root);
    
    		for (int i = 0; i < 400; i++)
    		{
    			Node treeNode = new Node();
    			treeNode.CustomAttributes.Add(new ConfigItem("Tag", "Tag", ParameterMode.Value));
    			treeNode.CustomAttributes.Add(new ConfigItem("TagInstance", "0", ParameterMode.Raw));
    			treeNode.CustomAttributes.Add(new ConfigItem("State", "State" + i, ParameterMode.Value));
    			treeNode.CustomAttributes.Add(new ConfigItem("StateId", "0" + i, ParameterMode.Raw));
    			treeNode.CustomAttributes.Add(new ConfigItem("Command", "Command" + i, ParameterMode.Value));
    			treeNode.CustomAttributes.Add(new ConfigItem("HasNotes", "true", ParameterMode.Raw));
    			treeNode.CustomAttributes.Add(new ConfigItem("IsUsedByACanvas", "false", ParameterMode.Raw));
    			treeNode.CustomAttributes.Add(new ConfigItem("PerformanceIndicatorId", "0", ParameterMode.Raw));
    			treeNode.Text = i.ToString();
    			treeNode.NodeID = node + i;
    			treeNode.Leaf = true;
    			root.Children.Add(treeNode);
    		}
    
    		return this.Direct(nodes);
    	}
    }
  7. #7
    I modified your sample as follows:

    Index.aspx. I modified how the timing is measured (see onTreeDataLoad), I suppressed the animation for the tree and removed your AfterItemExpand.

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
     
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Index</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True"
            ScriptMode="Debug">
        </ext:ResourceManager>
        <script>
          startTimeMs = 0;
          function loadTree() {
            App.treePanel.el.mask('Loading...', 'x-mask-loading');
            startTimeMs = new Date().getTime();
            Ext.Ajax.request(
                    {
                      url: '/TreePanel_Advanced/TreeGrid/NodeLoadOriginal',
                      method: 'GET',
                      params: {},
    
                      success: function onSuccess(result, request) {
                        onTreeDataLoad(App.treePanel, result);
                      },
                      failure: function (result, request) {
                        App.treePanel.el.unmask();
                        Ext.net.DirectEvent.showFailure(result);
                      }
                    });
          }
    
          function onTreeDataLoad(treePanel, result) {
            var nodes = Ext.JSON.decode(result.responseText).result;
            startTimeMs = new Date().getTime();
            treePanel.setRootNode(nodes[0]);
            treePanel.getRootNode().expand(true);
            treePanel.el.unmask();
            alert((new Date().getTime() - startTimeMs) / 1000 + 'seconds');
          }
     
        </script>
        <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
            <Items>
                <ext:TreePanel ID="treePanel" runat="server" Title="Test tree" IDMode="Static" UseArrows="true" Animate="False"
                    RootVisible="True">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Load Tree">
                                    <Listeners>
                                        <Click Handler="loadTree();">
                                        </Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Fields>
                        <ext:ModelField Name="Tag" Type="String" />
                        <ext:ModelField Name="TagInstance" Type="Int" />
                        <ext:ModelField Name="State" Type="String" />
                        <ext:ModelField Name="StateId" Type="Int" />
                        <ext:ModelField Name="Command" Type="String" />
                        <ext:ModelField Name="HasNotes" Type="Boolean" />
                        <ext:ModelField Name="IsUsedByACanvas" Type="Boolean" />
                        <ext:ModelField Name="PerformanceIndicatorId" Type="Int" />
                    </Fields>
                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn1" runat="server" Text="Title" Width="250" Sortable="false"
                                DataIndex="text" />
                            <ext:Column ID="CommandColumn" runat="server" DataIndex="Command" Text="&nbsp;" Width="30"
                                Sortable="false">
                            </ext:Column>
                            <ext:Column ID="TagColumn" runat="server" DataIndex="Tag" Text="Tag" Width="80" Sortable="false">
                            </ext:Column>
                            <ext:Column ID="TagInstanceColumn" runat="server" DataIndex="TagInstance" Text="Tag Instance"
                                Width="100" Sortable="false">
                            </ext:Column>
                            <ext:Column ID="StateColumn" runat="server" DataIndex="State" Text="State" Width="130"
                                Sortable="false">
                            </ext:Column>
                            <ext:CheckColumn ID="HasNotesColumn" runat="server" DataIndex="HasNotes" Text="Has Notes"
                                Sortable="false" Width="90" Align="Center">
                            </ext:CheckColumn>
                            <ext:CheckColumn ID="IsUsedByACanvasColumn" runat="server" DataIndex="IsUsedByACanvas"
                                Text="Used by a Canvas" Sortable="false" Width="120" Align="Center">
                            </ext:CheckColumn>
                        </Columns>
                    </ColumnModel>
                    <Root>
                        <ext:Node NodeID="0" Text="Root" Leaf="True">
                        </ext:Node>
                    </Root>
    <%--                <Listeners>--%>
    <%--                    <AfterItemExpand Handler="alert((new Date().getTime() - startTimeMs)/1000 + 'seconds');"></AfterItemExpand>--%>
    <%--                </Listeners>--%>
                </ext:TreePanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    I changed the TreeController.cs to add more depth to the tree. I renamed your original NodeLoad function NodeLoadOriginal.

        public class TreeGridController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult NodeLoadOriginal(string node)
            {
              NodeCollection nodes = new Ext.Net.NodeCollection();
              Node root = new Node();
              root.Text = node;
              root.NodeID = node;
              nodes.Add(root);
    
              for (int i = 0; i < 400; i++)
              {
                Node treeNode = new Node();
                treeNode.CustomAttributes.Add(new ConfigItem("Tag", "Tag", ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("TagInstance", "0", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("State", "State" + i, ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("StateId", "0" + i, ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("Command", "Command" + i, ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("HasNotes", "true", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("IsUsedByACanvas", "false", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("PerformanceIndicatorId", "0", ParameterMode.Raw));
                treeNode.Text = i.ToString();
                treeNode.NodeID = node + i;
                treeNode.Leaf = true;
                root.Children.Add(treeNode);
              }
    
              return this.Direct(nodes);
            }
    
            public ActionResult NodeLoad(string node)
            {
              NodeCollection nodes = new Ext.Net.NodeCollection();
              Node root = new Node();
              root.Text = node;
              root.NodeID = node;
              nodes.Add(root);
              
              IDictionary<int, Node> allNodes = new Dictionary<int, Node>();
    
              for (int i = 0; i < 400; i++)
              {
                Node treeNode = new Node();
                allNodes.Add(i, treeNode);
    
                treeNode.CustomAttributes.Add(new ConfigItem("Tag", "Tag", ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("TagInstance", "0", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("State", "State" + i, ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("StateId", "0" + i, ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("Command", "Command" + i, ParameterMode.Value));
                treeNode.CustomAttributes.Add(new ConfigItem("HasNotes", "true", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("IsUsedByACanvas", "false", ParameterMode.Raw));
                treeNode.CustomAttributes.Add(new ConfigItem("PerformanceIndicatorId", "0", ParameterMode.Raw));
                treeNode.Text = i.ToString();
                treeNode.NodeID = node + i;
                treeNode.Leaf = true;
                
              }
    
              for (int i = 0; i < 400; i++)
              {
                if ((i%100) == 0)
                {
                  root.Children.Add(allNodes[i]);              
                }
                else if (i < 10)
                {
                  allNodes[10].Children.Add(allNodes[i]);
                  allNodes[10].Leaf = false;
                }
                else if ((i%10) == 0)
                {
                  allNodes[ (i / 100) * 100 ].Children.Add(allNodes[i]);
                  allNodes[ (i / 100) * 100 ].Leaf = false;
                }
                else
                {
                  allNodes[ 10 * (i / 10)].Children.Add(allNodes[i]);
                  allNodes[10* (i / 10)].Leaf = false;
                }
              }
              
              return this.Direct(nodes);
            }
        }

    Now, running the changed sample in Chrome using the original tree structure that you had takes about: 0.5s.
    Running my version that adds up to three levels (excluding the root) takes: 1.5s. It seems that adding a level decreases the performance by 100%. You could play with this tree by adding more levels and see what the performance is.

    Here are some points I want to make:

    1. Did you try the json file I made available through the link? The problem is the structure of the data. In my case, the depth of the tree is 7, i.e. there are paths that have 7 nodes. In your original sample the tree is basically flat. I think that's where things slow down, the more levels you have in the tree the performance will degrade drastically. In my application I cannot return flat data. In the end this is what trees are for, to display hierarchical data.

    2. I compared loading the same data (my data) between version Ext.Net 1.x (Ext Js 3.4) and Ext.Net 2.x (Ext Js 4.1.1), and there is a huge performance dip between the two versions. Again for the same data.

    In think whatever they did in ExtJs 4 it slowed down the rendering process of the tree.

    Thanks
  8. #8
    Did you try the json file I made available through the link? The problem is the structure of the data. In my case, the depth of the tree is 7, i.e. there are paths that have 7 nodes. In your original sample the tree is basically flat. I think that's where things slow down, the more levels you have in the tree the performance will degrade drastically. In my application I cannot return flat data. In the end this is what trees are for, to display hierarchical data.
    Sorry, my bad. I didn't, because in the #1 post you said:
    I currently have an .Net MVC controller method that returns about 250 nodes.
    and I tried to reproduce described problem via controller action.

    In think whatever they did in ExtJs 4 it slowed down the rendering process of the tree.
    Unfortunately, rendering in ExtJS 4 is slower than in ExtJS 3 but future 4.2 version supposed to be much faster because it's the main purpose of this release. However, the main problem in performance of DOM manipulation in modern browsers. Now, I can recommend only to load levels of tree consequently or you have to load them all in one request?
  9. #9
    Hi all,

    Suspending layouts helps a lot.

    Ext.suspendLayouts();
    treePanel.setRootNode(nodes[0]);
    treePanel.getRootNode().expand(true);
    Ext.resumeLayouts(true);
    ExtJS suggests this thing in their performance guide.
    http://docs.sencha.com/ext-js/4-1/#!/guide/performance

    With this change loading occurs well in Chrome (< 2 s), a bit worse in FireFox (2-3 s) and, unfortunately, still not good in IE9 (6-8 s) and awfully in IE8 (14-15 s).

    Soon we will incorporate ExtJS 4.2 beta release and could test it again.

    We also extremely hope they were able to improve the performance. Especially, in IE.
  10. #10
    I guess that main bottle neck is the following instruction
    treePanel.getRootNode().expand(true);
    Because 'true' means expand all nodes (including children), during first expanding all children are rendered

    Try to suspend layouts before expanding
    Ext.suspendLayouts();
    treePanel.getRootNode().expand(true);
    Ext.resumeLayouts(false);
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Expanding Tree Nodes in Behind Code
    By taylorjp2000 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 11, 2012, 6:00 PM
  2. Replies: 0
    Last Post: Nov 16, 2011, 10:07 AM
  3. [CLOSED] Remote-Load of a Subtree without expanding nodes
    By macap in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 31, 2011, 11:59 AM
  4. Loading Tree panel nodes from code behind
    By sumesh in forum 1.x Help
    Replies: 2
    Last Post: May 20, 2011, 12:00 PM
  5. Replies: 1
    Last Post: Jan 26, 2010, 3:10 PM

Posting Permissions