PDA

View Full Version : [CLOSED] Performance problem with version 2 of the TreePanel control



rmelancon
Aug 19, 2014, 2:46 PM
I am having a problem with a page that I have converted from a version 1.x TreeGrid to version 2.x TreePanel. It is a 2 level hierarchy with 120 folders each with 5 leaf nodes. In the 1.x version, I can expand all and collapse all with no problems, takes a second or 2 to expand and collapse. In the 2.x version it locks the page and is unresponsive for a full minute and 10 seconds. The page display starts updating at around 40 seconds but the page is still locked until it finishes at around a minute 10. Not sure what was added to make the control so heavy, but expand and collapse is unusable at this level of performance. Is there anyway to speed things up?



<%@ Page Language="vb" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
CreateNodeWithChildren()
End Sub

Private Sub CreateNodeWithChildren()

Dim root As Ext.Net.Node = tpHouseholds.Root.Primary
Dim available As Ext.Net.NodeProxy

available = tpHouseholds.GetNodeById("RootHouseholds")

Dim treeNode As Node = Nothing

For i As Integer = 1 To 120
treeNode = New Ext.Net.Node()
With treeNode
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "ID", .Value = "outer" & i.ToString, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "DisplayName", .Value = "name" & i.ToString, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "Address", .Value = "address" & i.ToString, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "AccountNumber", .Value = "", .Mode = ParameterMode.Value})
.Leaf = False
.NodeID = i
.Text = "name" & i.ToString
.Icon = Icon.House
End With

For j As Integer = 1 To 5
treeNode.Children.Add(CreateNodeWithOutChildren(i, j))
Next
available.AppendChild(treeNode)
Next

End Sub
Private Function CreateNodeWithOutChildren(i As Integer, j As Integer) As Node
Dim treeNode As Node
Dim nodeid As String = ((i * 1000) + j).ToString
treeNode = New Ext.Net.Node()
With treeNode
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "ID", .Value = nodeid, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "DisplayName", .Value = "name" & nodeid, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "Address", .Value = "", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.ConfigItem With {.Name = "AccountNumber", .Value = "accountnumber" & nodeid, .Mode = ParameterMode.Value})
.Leaf = True
.NodeID = nodeid
.Text = "leaf" & nodeid
.Icon = Icon.User
End With

Return treeNode
End Function

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

</head>
<body>
<form runat="server">
<ext2:ResourceManager runat="server" />

<ext2:TreePanel
ID="tpHouseholds"
runat="server"
Border="false"
Height="535"
Width="440"
Cls="tree"
Title="Households"
rootVisible="false"
SingleExpand="false"
FolderSort="true"
UseArrows="true"
Animate="true">
<TopBar>
<ext2:Toolbar runat="server">
<Items>
<ext2:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{tpHouseholds}.expandAll();" />
</Listeners>
</ext2:Button>
<ext2:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{tpHouseholds}.collapseAll();" />
</Listeners>
</ext2:Button>
</Items>
</ext2:Toolbar>
</TopBar>
<Fields>
<ext2:ModelField name="ID"></ext2:ModelField>
<ext2:ModelField Name="DisplayName"></ext2:ModelField>
<ext2:ModelField Name="Address"></ext2:ModelField>
<ext2:ModelField Name="AccountNumber"></ext2:ModelField>
</Fields>
<ColumnModel>
<Columns>
<ext2:TreeColumn Flex="2" runat="server" DataIndex="DisplayName" Text="Name"></ext2:TreeColumn>
<ext2:Column Flex="2" runat="server" Dataindex="Address" Text="Address" />
<ext2:Column Flex="1" runat="server" Dataindex="AccountNumber" Text="Account Number" />
</Columns>
</ColumnModel>
<Root>
<ext2:Node NodeID="RootHouseholds" Text="Households" Icon="Folder" Expanded="true" EmptyChildren="true" />
</Root>
</ext2:TreePanel>
</form>
</body>

</html>

rmelancon
Aug 19, 2014, 2:51 PM
May have just answered my own question... noticed the Animate="true" setting, turned it to false and things sped up significantly. Still a couple second delay to expand but much more useable.

Daniil
Aug 26, 2014, 8:15 AM
Hi @rmelancon,

Sorry for such the delay in answering on your question.

First of all, when I ran your test case, it took forever on initial load.

It is because of this

Dim available As Ext.Net.NodeProxy
available = tpHouseholds.GetNodeById("RootHouseholds")


and

available.AppendChild(treeNode)

It should not be used on initial load.

Please replace with

Dim available As Ext.Net.Node

available = tpHouseholds.Root.Primary
and

available.Children.Add(treeNode)

As for expanding and collapsing all the nodes, yes, turning off the animation helps. By the way, you can still keep Animate="true" and turn it off when required only. For example, the code to expand all the nodes might look like this:

var tree = App.tpHouseholds;
tree.enableAnimations = tree.view.animate = false;
App.tpHouseholds.expandAll();
tree.enableAnimations = tree.view.animate = true;

It is still kind of slower than with Ext.NET v1. Unfortunately, it is a known of ExtJS 4. There might be a degradation in the performance. Expecially, with the big amount of data in the TreePanels and GridPanels.