PDA

View Full Version : [CLOSED] Expanding treenode major performance issue with layouts



jchau
Mar 06, 2013, 10:49 PM
I have a treepanel in left region, grid in center region. When I expand a node, it loads 50 child nodes. That ends up doing 50 appendChild --> 50 resumeLayouts --> 50 grid layouts --> 50 grid syncRowHeights. The entire process takes 10s in IE. 10s to load 50 nodes. Layout issues in 4.x is getting ridiculous....

Baidaly
Mar 06, 2013, 11:27 PM
Hello!

Can you provide sample of your problem? I've tried the following and it works fine:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void NodeLoad(object sender, NodeLoadEventArgs e)
{
string prefix = e.ExtraParams["prefix"] ?? "";

if (!string.IsNullOrEmpty(e.NodeID))
{
for (int i = 1; i < 60; i++)
{
Node asyncNode = new Node();
asyncNode.Text = prefix + e.NodeID + i;
asyncNode.NodeID = e.NodeID + i;
e.Nodes.Add(asyncNode);
}

for (int i = 61; i < 110; i++)
{
Node treeNode = new Node();
treeNode.Text = prefix + e.NodeID + i;
treeNode.NodeID = e.NodeID + i;
treeNode.Leaf = true;
e.Nodes.Add(treeNode);
}
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TextField ID="TextField1" runat="server" Text="Node" Width="200" />

<ext:TreePanel
ID="TreePanel1"
runat="server"
Title="Tree"
Width="200"
Height="500"
Border="false">
<Store>
<ext:TreeStore runat="server" OnReadData="NodeLoad">
<Proxy>
<ext:PageProxy />
</Proxy>
<Parameters>
<ext:StoreParameter Name="prefix" Value="#{TextField1}.getValue()" Mode="Raw" />
</Parameters>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
</ext:TreePanel>
</form>
</body>
</html>

jchau
Mar 06, 2013, 11:54 PM
Have you profiled your code? Does it do layouts more than once? You can take a look at appendChild in the source code. For each node, it calls suspendLayouts and resumeLayouts.

Baidaly
Mar 07, 2013, 12:12 AM
Have you profiled your code? Does it do layouts more than once? You can take a look at appendChild in the source code. For each node, it calls suspendLayouts and resumeLayouts.

No, I haven't. Because I haven't seen any problems with performance with loading even more than 50 nodes. Can you provide your sample so we can investigate what exactly makes your solution slow.

jchau
Mar 07, 2013, 2:15 AM
Here's an example showing the perfomance issue. Expand the Root node after the grid loads. It should be instant. Your example has one tree only so each layout is not doing much. But if you have more components on your page, each layout is VERY costly and it adds up quick.





<script runat="server">

Protected Sub storeTree_OnReadData(sender As Object, e As Ext.Net.NodeLoadEventArgs)
For i As Integer = 0 To 49
e.Nodes.Add(New Ext.Net.Node() With {.Text = "Node " + i.ToString })
Next
End Sub

Private Sub storePlans_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles storePlans.ReadData

Me.storePlans.DataSource = GetGridData()
Me.storePlans.DataBind()

End Sub

Private Function GetGridData() As IEnumerable
Dim list As New System.Collections.Generic.List(Of Object)

list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})
list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2", .Column3 = "Test3", .Column4 = "Test4", .Column5 = "Test5", .Column6 = "Test6", .Column7 = "Test7", .Column8 = "Test8", .Column9 = "Test9", .Column10 = "Test10", .Column11 = "Test11", .Column12 = "Test12"})

Return list.GetRange(0, 25)

End Function


</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<style type="text/css">
.x-grid-dir .x-column-header-inner
{
white-space: normal !important;
overflow: hidden;
text-align: center;
line-height: normal;
}

.x-grid-dir .x-column-header-inner span
{
white-space: normal !important;
}


/* Bigger row height to accomodate review column */.x-grid-dir .x-grid-row td, .x-grid-dir .x-grid-summary-row td
{
padding-left: 0px;
padding-right: 0px;
}
.x-grid-dir .x-grid-cell-inner
{
height: 30px !important;
white-space: normal;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<ext:Store runat="server" ID="storePlans" WarningOnDirty="false" AutoLoad="true"
RemoteSort="true" ShowWarningOnFailure="false">
<Proxy>
<ext:PageProxy>
<RequestConfig Timeout="180000">
</RequestConfig>
<Reader>
<ext:JsonReader>
</ext:JsonReader>
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ENTITYGUID">
<Fields>
<ext:ModelField Name="ENTITYGUID">
</ext:ModelField>
<ext:ModelField Name="Column1">
</ext:ModelField>
<ext:ModelField Name="Column2">
</ext:ModelField>
<ext:ModelField Name="Column3">
</ext:ModelField>
<ext:ModelField Name="Column4">
</ext:ModelField>
<ext:ModelField Name="Column5">
</ext:ModelField>
<ext:ModelField Name="Column6">
</ext:ModelField>
<ext:ModelField Name="Column7">
</ext:ModelField>
<ext:ModelField Name="Column8">
</ext:ModelField>
<ext:ModelField Name="Column9">
</ext:ModelField>
<ext:ModelField Name="Column10">
</ext:ModelField>
<ext:ModelField Name="Column11">
</ext:ModelField>
<ext:ModelField Name="Column12">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<ext:StoreParameter Name="gridAction" Value="init">
</ext:StoreParameter>
</AutoLoadParams>
<Listeners>
<Load Handler="this.lastOptions.gridAction='';" />
</Listeners>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Container ID="Container1" runat="server">
<LayoutConfig>
<ext:BorderLayoutConfig>
</ext:BorderLayoutConfig>
</LayoutConfig>
<Items>
<ext:TreePanel runat="server" ID="treeStrataAjax" UseArrows="true" Width="300" Region="West">
<Store>
<ext:TreeStore ID="storeTree" runat="server" OnReadData="storeTree_OnReadData">
<Proxy>
<ext:PageProxy>
</ext:PageProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node Text="Root">
</ext:Node>
</Root>
</ext:TreePanel>
<ext:Container ID="Container2" runat="server" Region="Center" Visible="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch">
</ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:TabStrip runat="server" ID="tabs" Height="25" Plain="true">
<Items>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
<ext:Tab Text="Tab1">
</ext:Tab>
</Items>
</ext:TabStrip>
</Items>
</ext:Toolbar>
<ext:GridPanel runat="server" ID="gridPlans" StoreID="storePlans" TrackMouseOver="true"
SelectionMemory="false" EnableColumnHide="false" Cls="x-grid-dir" EnableDragDrop="true"
DDGroup="DDGrid" Flex="1" AutoScroll="true">
<TopBar>
<ext:Toolbar runat="server" ID="tbTop">
<Items>
<ext:Button ID="Button1" runat="server" Text="Change Tab Title" >
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar runat="server" ID="gridPager" StoreID="storePlans">
</ext:PagingToolbar>
</BottomBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Locked="true">
</ext:RowNumbererColumn>
<ext:Column ID="Column1" DataIndex="Column1" runat="server" Width="200" Locked="true">
</ext:Column>
<ext:Column ID="Column2" DataIndex="Column2" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column3" DataIndex="Column3" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column4" DataIndex="Column4" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column5" DataIndex="Column5" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column6" DataIndex="Column6" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column7" DataIndex="Column7" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column8" DataIndex="Column8" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column9" DataIndex="Column9" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column10" DataIndex="Column10" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column11" DataIndex="Column11" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column12" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column13" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column14" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column15" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column16" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column17" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column18" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
<ext:Column ID="Column19" DataIndex="Column12" runat="server" Width="100">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel Mode="Multi">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Baidaly
Mar 07, 2013, 3:37 AM
Yes, this is known issue, to increase performance you should use Ext.suspendLayouts(); and Ext.resumeLayouts();. Try please the following:



<ext:TreePanel runat="server" ID="treeStrataAjax" UseArrows="true" Width="300" Region="West">
<Store>
<ext:TreeStore ID="storeTree" runat="server" OnReadData="storeTree_OnReadData">
<Proxy>
<ext:PageProxy>
<Listeners>
</Listeners>
</ext:PageProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node Text="Root">
</ext:Node>
</Root>
<Listeners>
<BeforeLoad Handler="Ext.suspendLayouts();"></BeforeLoad>
<Load Handler="Ext.resumeLayouts();"></Load>
</Listeners>
</ext:TreePanel>

jchau
Mar 07, 2013, 3:59 AM
Yes, this is known issue, to increase performance you should use Ext.suspendLayouts(); and Ext.resumeLayouts();. Try please the following:



<ext:TreePanel runat="server" ID="treeStrataAjax" UseArrows="true" Width="300" Region="West">
<Store>
<ext:TreeStore ID="storeTree" runat="server" OnReadData="storeTree_OnReadData">
<Proxy>
<ext:PageProxy>
<Listeners>
</Listeners>
</ext:PageProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node Text="Root">
</ext:Node>
</Root>
<Listeners>
<BeforeLoad Handler="Ext.suspendLayouts();"></BeforeLoad>
<Load Handler="Ext.resumeLayouts();"></Load>
</Listeners>
</ext:TreePanel>


So I am suppose to add a BeforeLoad and Load handler to everywhere I use trees? This can't be a permanent or recommended solution. Also, why would loading treenodes cause a grid to redo its layout? I dont see how changes in the tree can cause the grid to change its UI. The tree has scrollbars to handle both horizontal and vertical overflows.

Baidaly
Mar 07, 2013, 4:17 AM
Unfortunately, now we can suggest only this solution: http://forums.ext.net/showthread.php?23471

Daniil
Mar 07, 2013, 12:28 PM
Hello,

The issue appears to be not reproducible without the TabStrip. We will investigate.

For now, we can suggest to set up some Width for the TabStrip. It fixes the issue.

jchau
Mar 07, 2013, 5:11 PM
Can you recommend an override that will affect all trees without manually adding those 2 listeners to every tree in my application?

Vladimir
Mar 07, 2013, 5:55 PM
The issue with TabStrip is fixed in SVN
Can you update and retest?

Daniil
Mar 11, 2013, 3:52 PM
Also Sencha fixed this issue.
http://www.sencha.com/forum/showthread.php?258162

Moreover, we reported one issue more.
http://www.sencha.com/forum/showthread.php?258415

Hopefully, they will find a way to improve it as well.

jchau
Mar 11, 2013, 4:02 PM
Also Sencha fixed this issue.
http://www.sencha.com/forum/showthread.php?258162

Moreover, we reported one issue more.
http://www.sencha.com/forum/showthread.php?258162

Hopefully, they will find a way to improve it as well.

Both links are the same.

Also, I am confused by when this will be released. The top of hte thread said it's fixed in 4.2.0 GA but Animal said 4.2.1.

Daniil
Mar 11, 2013, 4:12 PM
Both links are the same.

Sorry, corrected.
http://www.sencha.com/forum/showthread.php?258415



Also, I am confused by when this will be released. The top of hte thread said it's fixed in 4.2.0 GA but Animal said 4.2.1.

Probably, @Animal was a pessimist estimating time frame. I guess it should in 4.2.0 final release (GA).

Though, the main bug caused the performance problem in your example was fixed by Vladimir in our SVN trunk.