[CLOSED] IE7 100% CPU for 10+ seconds when loading Example Explorer

[jchau]

Using a virtual machine with WinXP, IE7, 512mb of ram, Task Manager shows CPU is at 100% for 10+ seconds when hitting Examples Explorer. Just want to see if this is expected. IMO, you shouldn't advertise supporting IE6 and IE7 if it takes 10+ seconds to load a page...

[Daniil]

Hi @jchau,

Thank you for the report. Reproduced with the both - online Examples Explorer and the trunk one. We will investigate.

[jchau]

Just a simple page with nothing but ResourceManager will drive the CPU to 100% for a second or so...

[Vladimir]

Just a simple page with nothing but ResourceManager will drive the CPU to 100% for a second or so...

Does a page with pure ExtJS sample cause the same behaviour? Or it is Ext.Net only defect?
100% CPU loading by browser only? Client and server side on the same machine or different?

[jchau]

Does a page with pure ExtJS sample cause the same behaviour? Or it is Ext.Net only defect?
100% CPU loading by browser only? Client and server side on the same machine or different?

With just pure ExtJS, CPU spikes to 75% or so. With Ext.NET added, it spikes to 99%. I am guessing it's just the CPU reading the js files. The client and server are on different machines.

[jchau]

Here's an example showing that it takes 1s to parse the ExtJS and ExtNET script files. This is with the files cached on the browser so it's the time to just parse the files. It also takes 2-3s to render the Ext components. This is a very basic example. Our pages are often more complex than this. A similar example in Ext 1.x would be done in 1s or so total. Now it's 4s. That's a HUGE difference to our end users.

I am using a virtual machine with IE7, WinXP, 2 gig of ram, and 2.4GHZ single core.

<script runat="server">
    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.ResourceManager1.RegisterBeforeClientInitScript("this.startPoint = new Date();")
        Me.ResourceManager1.Listeners.DocumentReady.Handler = "alert('Ext Components - ' + (new Date() - this.startPoint).toString());"
    End Sub
    
    Protected Sub storeTree_OnReadData(ByVal sender As Object, ByVal 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>
<html>
<script>
    window.startTime = new Date();
</script>
<head id="Head1" runat="server">
    <title>Test Page </title>
    <script>
        alert('Script Parsing - ' + (new Date() - window.startTime).toString());
        window.startTime = new Date();
    </script>
</head>
<body>
    <script type="text/javascript">


    </script>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
        DisableViewState="true" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
        <Bin>
            <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>
            </ext:Store>
        </Bin>
        <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>

[Vladimir]

Hi

Yes, unfortunately IE performance is big trouble in ExtJS 4.x (like, memory consumption also). Sencha forum contains many threads where users express dissatisfaction with this. I did not see any clear answer from Sencha about any plans to improve it (all answers so fuzzy)

I will investigate why Examples Explorer has big delay when loading (i guess it is related with start page only)

About your example, not sure what exactly Ext.Net version do you use but in previous version was one perfomance bug is related with TabStrip (TabStrip was causing many relayouting)

Try to remove it from the page and retest (or try to set autoGrow: false via CustomConfig), that issue was fixed in 4879 revision

[jchau]

I am on a version with the TabStrip performance fix.

[Daniil]

I can confirm the problem with some numbers: parsing time/Ext components time.

Windows XP IE7
Ext.NET v1

688/2328
625/2469
625/1750

Windows XP IE7
Ext.NET v2 (trunk)

5125/6297
5188/7969
5219/7423

[Daniil]

I will investigate why Examples Explorer has big delay when loading (i guess it is related with start page only)

It is due to amount of nodes loaded into the TreePanel. There are >600 nodes and it appears to be too many for IE7 at once.

It is reproducible with the following test case.

I guess the only solution is to load nodes for the current level only.

Example

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

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

<script runat="server">
    protected void GetNodes(object sender, NodeLoadEventArgs e)
    {
        if (e.NodeID == "Root")
        {
            Ext.Net.NodeCollection nodes = new Ext.Net.NodeCollection();

            for (int i = 0; i < 50; i++)
            {
                Node n1 = new Node();
                n1.Text = "Node_" + i;

                for (int j = 0; j < 3; j++)
                {
                    Node n2 = new Node();
                    n2.Text = "Node_" + i + "_" + j;

                    for (int k = 0; k < 5; k++)
                    {
                        Node n3 = new Node();
                        n3.Text = "Node_" + i + "_" + j + "_" + k;
                        n3.Leaf = true;
                        n2.Children.Add(n3);
                    }
                    
                    n1.Children.Add(n2);
                }

                nodes.Add(n1);
            }

            e.Nodes = nodes;
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel
            ID="exampleTree"
            runat="server"
            Header="false"
            AutoScroll="true"
            RootVisible="false"
            Animate="false"
            Height="500">
            <Store>
                <ext:TreeStore runat="server" OnReadData="GetNodes">
                    <Proxy>
                        <ext:PageProxy>
                            <RequestConfig Method="GET" Type="Load" />
                        </ext:PageProxy>
                    </Proxy>
                    <Root>
                        <ext:Node NodeID="Root" Expanded="true" />
                    </Root>
                </ext:TreeStore>
            </Store>
        </ext:TreePanel>
    </form>
</body>
</html>