PDA

View Full Version : [CLOSED] TreePanel rendering issues



stratadev
Feb 15, 2013, 8:47 PM
Hi,

I am currently on ExtJS version 4.2.0.265 and I am having problems with TreePanel rendering when trying to expand or collapse nodes.

In IE 8 -
After drilling down a few levels, you start getting the error -
SCRIPT438: Object doesn't support property or method 'getAttribute'

In Chrome - the lines start to disappear.

you can reproduce the issue with the following example -




<%@ Import Namespace="Ext.Net" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Xml.Linq" %>
<%@ Import Namespace="System.Collections" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


If Not IsPostBack Then

End If
End Sub

Protected Sub NodeLoad(ByVal sender As Object, ByVal e As NodeLoadEventArgs)

Dim prefix = IIf(e.ExtraParams("prefix") = Nothing, e.ExtraParams("prefix"), String.Empty)

If Not String.IsNullOrWhiteSpace(e.NodeID) Then

For i As Int32 = 1 To 6
Dim asyncNode As New Node() With {.Text = prefix & e.NodeID & i, .NodeID = e.NodeID & i}
e.Nodes.Add(asyncNode)
Next

For i As Int32 = 7 To 12
Dim treeNode As New Node() With {.Text = prefix & e.NodeID & i, .NodeID = e.NodeID & i, .Leaf = True}
e.Nodes.Add(treeNode)
Next

End If


End Sub

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
<script type="text/javascript">

</script>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<h1>
TreePanel using PageProxy</h1>
<p>
Set custom node prefix:</p>
<ext:TextField ID="TextField1" runat="server" Text="Node" Width="200" />
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="200" Height="500" Padding="15"
Border="false">
<Store>
<ext:TreeStore ID="TreeStore1" 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>

Baidaly
Feb 16, 2013, 12:43 AM
Hello!

Try the following:



Protected Sub NodeLoad(ByVal sender As Object, ByVal e As NodeLoadEventArgs)

Dim prefix = IIf(e.ExtraParams("prefix") = Nothing, e.ExtraParams("prefix"), String.Empty)

If Not String.IsNullOrWhiteSpace(e.NodeID) Then

For i As Int32 = 1 To 5
Dim asyncNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i}
e.Nodes.Add(asyncNode)
Next

For i As Int32 = 6 To 11
Dim treeNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i, .Leaf = True}
e.Nodes.Add(treeNode)
Next

End If


End Sub

Daniil
Feb 17, 2013, 12:58 PM
Hi @stratadev,

I think your sample doesn't work because the nodes' ids are not unique. For example, there is the node with "011" id in the first load response and in the second one.

stratadev
Feb 18, 2013, 5:57 PM
Thanks guys, I have one more problem here -

When I set Animate="false", the AfterItemCollapse event fires before the BeforeItemCollapse event.

Is this expected or Am I missing something?



<%@ Import Namespace="Ext.Net" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Xml.Linq" %>
<%@ Import Namespace="System.Collections" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


If Not IsPostBack Then

End If
End Sub

Protected Sub NodeLoad(ByVal sender As Object, ByVal e As NodeLoadEventArgs)

Dim prefix = IIf(e.ExtraParams("prefix") = Nothing, e.ExtraParams("prefix"), String.Empty)

If Not String.IsNullOrWhiteSpace(e.NodeID) Then

For i As Int32 = 1 To 50
Dim asyncNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i}
e.Nodes.Add(asyncNode)
Next

For i As Int32 = 51 To 200
Dim treeNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i, .Leaf = True}
e.Nodes.Add(treeNode)
Next

End If


End Sub

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
<script type="text/javascript">

</script>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<h1>
TreePanel using PageProxy</h1>
<p>
Set custom node prefix:</p>
<ext:TextField ID="TextField1" runat="server" Text="Node" Width="200" />
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="200" Height="500" Padding="15"
Border="false" UseArrows="true" Animate="false" >
<Listeners>
<BeforeItemCollapse Handler="alert('Before Collapse');" />
<AfterItemCollapse Handler="alert('After Collapse');" />
</Listeners>
<Store>
<ext:TreeStore ID="TreeStore1" 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>

stratadev
Feb 18, 2013, 8:14 PM
Never mind, once we updated to the latest version, the issue is gone.

Please go ahead and close this thread.


Thanks guys, I have one more problem here -

When I set Animate="false", the AfterItemCollapse event fires before the BeforeItemCollapse event.

Is this expected or Am I missing something?



<%@ Import Namespace="Ext.Net" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System.Xml.Linq" %>
<%@ Import Namespace="System.Collections" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


If Not IsPostBack Then

End If
End Sub

Protected Sub NodeLoad(ByVal sender As Object, ByVal e As NodeLoadEventArgs)

Dim prefix = IIf(e.ExtraParams("prefix") = Nothing, e.ExtraParams("prefix"), String.Empty)

If Not String.IsNullOrWhiteSpace(e.NodeID) Then

For i As Int32 = 1 To 50
Dim asyncNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i}
e.Nodes.Add(asyncNode)
Next

For i As Int32 = 51 To 200
Dim treeNode As New Node() With {.Text = "Node" & prefix & e.NodeID & i, .NodeID = e.NodeID & "_" & i, .Leaf = True}
e.Nodes.Add(treeNode)
Next

End If


End Sub

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
<script type="text/javascript">

</script>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<h1>
TreePanel using PageProxy</h1>
<p>
Set custom node prefix:</p>
<ext:TextField ID="TextField1" runat="server" Text="Node" Width="200" />
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="200" Height="500" Padding="15"
Border="false" UseArrows="true" Animate="false" >
<Listeners>
<BeforeItemCollapse Handler="alert('Before Collapse');" />
<AfterItemCollapse Handler="alert('After Collapse');" />
</Listeners>
<Store>
<ext:TreeStore ID="TreeStore1" 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>