Nov 05, 2010, 2:19 PM
[1.0] TreePanel ghosting effect on node click
I'm noticing a very strange behavior with the TreePanel, when the text of a node goes off the side of the TreePanel - when clicking on a node, the contents of the TreePanel sometimes jumps to the left of the tree and immediately returns to its original position, sort of like a ghosting effect.
Unfortunately I can't capture the effect through screen capture videos as it happens too quickly.
The following code under IE8 should replicate the issue - expand all the nodes by clicking on the "Expand All" button, then click repeatedly on one of the nodes which contains a large amount of text and goes off the side of the tree. You should notice a slight ghosting effect on some of the node clicks.
Thanks
Dan
Unfortunately I can't capture the effect through screen capture videos as it happens too quickly.
The following code under IE8 should replicate the issue - expand all the nodes by clicking on the "Expand All" button, then click repeatedly on one of the nodes which contains a large amount of text and goes off the side of the tree. You should notice a slight ghosting effect on some of the node clicks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel
ID="TreePanel1"
runat="server"
Icon="BookOpen"
Title="Catalog"
AutoScroll="true"
Width="300"
Height="700">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode Text="Composers" Expanded="true">
<Nodes>
<ext:TreeNode Text="Beethoven" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="No. 1 - C" Icon="Music" />
<ext:TreeNode Text="No. 2 - B-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 3 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 4 - G Major" Icon="Music" />
<ext:TreeNode Text="No. 5 - E-Flat Major No. 5 - E-Flat Major No. 5 - E-Flat Major No. 5 - E-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets">
<Nodes>
<ext:TreeNode Text="Six String Quartets" Icon="Music" />
<ext:TreeNode Text="Three String Quartets" Icon="Music" />
<ext:TreeNode Text="Grosse Fugue for String Quartets Grosse Fugue for String Quartets Grosse Fugue for String Quartets" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas">
<Nodes>
<ext:TreeNode Text="Sonata in A Minor Sonata in A Minor Sonata in A Minor Sonata in A Minor Sonata in A Minor" Icon="Music" />
<ext:TreeNode Text="sonata in F Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies">
<Nodes>
<ext:TreeNode Text="No. 1 - C Major No. 1 - C Major No. 1 - C Major No. 1 - C Major No. 1 - C Major" Icon="Music" />
<ext:TreeNode Text="No. 2 - D Major" Icon="Music" />
<ext:TreeNode Text="No. 3 - E-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 4 - B-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 5 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 6 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 7 - A Major" Icon="Music" />
<ext:TreeNode Text="No. 8 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 9 - D Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Brahms" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="Violin Concerto" Icon="Music" />
<ext:TreeNode Text="Double Concerto - A Minor" Icon="Music" />
<ext:TreeNode Text="Piano Concerto No. 1 - D Minor" Icon="Music" />
<ext:TreeNode Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets">
<Nodes>
<ext:TreeNode Text="Piano Quartet No. 1 - G Minor" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 2 - A Major" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 3 - C Minor" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas">
<Nodes>
<ext:TreeNode Text="Two Sonatas for Clarinet - F Minor" Icon="Music" />
<ext:TreeNode Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies">
<Nodes>
<ext:TreeNode Text="No. 1 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 2 - D Minor" Icon="Music" />
<ext:TreeNode Text="No. 3 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 4 - E Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Mozart" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="Piano Concerto No. 12" Icon="Music" />
<ext:TreeNode Text="Piano Concerto No. 17" Icon="Music" />
<ext:TreeNode Text="Clarinet Concerto" Icon="Music" />
<ext:TreeNode Text="Violin Concerto No. 5" Icon="Music" />
<ext:TreeNode Text="Violin Concerto No. 4" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
</form>
</body>
</html>Thanks
Dan
