Feb 08, 2012, 10:15 AM
[CLOSED] TreePanel scrollbar does not scroll to selected node
Hi,
I have a treepanel with so many nodes that when I expand it a vertical scrollbar appears.
Now I want to "select" a specified node; the problem is that node is highlighted but vertical scrollbar does not scroll to it.
Please see example below
I have a treepanel with so many nodes that when I expand it a vertical scrollbar appears.
Now I want to "select" a specified node; the problem is that node is highlighted but vertical scrollbar does not scroll to it.
Please see example below
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_tree.aspx.vb" Inherits="test_tree" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 runat="server">
<script language="javascript" type="text/javascript">
function ExpandTree(tree) {
tree.expandAll();
}
function SetNodeTree(tree, idnodesel) {
if (tree) {
if (idnodesel!="") {
var node = tree.getNodeById(idnodesel);
if (node) {
node.ensureVisible();
node.select();
}
}
}
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Locale="it-IT">
</ext:ResourceManager>
<div>
<ext:Panel ID="PanelGestioneDocumenti" runat="server" Height="500" Title="Gestione Documenti" Draggable="false" MonitorResize="true">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="false" Split="true">
<ext:Panel ID="PanelStruttura" runat="server" Title="" Width="290" Draggable="false">
<Content>
<ext:Panel ID="PanelAlbero" runat="server" Border="false" Title="" Draggable="false" >
<Items>
<ext:TreePanel ID="TreePanelDoc" runat="server" Title="" Border="false" Mode="Remote" Draggable="false" Height="490" AutoScroll="true" ContainerScroll="true"> <%--EnableDD="true">--%>
<Root>
<ext:TreeNode NodeID="ROOT" Text="ROOT" Expanded="true" Icon="Folder" Expandable="False" AllowChildren="true">
<Nodes>
<ext:TreeNode Text="Beethoven" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos" NodeID="1">
<Nodes>
<ext:TreeNode NodeID="1.1" Text="No. 1 - C" Icon="Music" />
<ext:TreeNode NodeID="1.2" Text="No. 2 - B-Flat Major" Icon="Music" />
<ext:TreeNode NodeID="1.3" Text="No. 3 - C Minor" Icon="Music" />
<ext:TreeNode NodeID="1.4" Text="No. 4 - G Major" Icon="Music" />
<ext:TreeNode NodeID="1.5" Text="No. 5 - E-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets" NodeID="2">
<Nodes>
<ext:TreeNode NodeID="2.1" Text="Six String Quartets" Icon="Music" />
<ext:TreeNode NodeID="2.2" Text="Three String Quartets" Icon="Music" />
<ext:TreeNode NodeID="2.3" Text="Grosse Fugue for String Quartets" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas" NodeID="3">
<Nodes>
<ext:TreeNode NodeID="3.1" Text="Sonata in A Minor" Icon="Music" />
<ext:TreeNode NodeID="3.2" Text="sonata in F Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies" NodeID="4">
<Nodes>
<ext:TreeNode NodeID="4.1" Text="No. 1 - C Major" Icon="Music" />
<ext:TreeNode NodeID="4.2" Text="No. 2 - D Major" Icon="Music" />
<ext:TreeNode NodeID="4.3" Text="No. 3 - E-Flat Major" Icon="Music" />
<ext:TreeNode NodeID="4.4" Text="No. 4 - B-Flat Major" Icon="Music" />
<ext:TreeNode NodeID="4.5" Text="No. 5 - C Minor" Icon="Music" />
<ext:TreeNode NodeID="4.6" Text="No. 6 - F Major" Icon="Music" />
<ext:TreeNode NodeID="4.7" Text="No. 7 - A Major" Icon="Music" />
<ext:TreeNode NodeID="4.8" Text="No. 8 - F Major" Icon="Music" />
<ext:TreeNode NodeID="4.9" Text="No. 9 - D Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Brahms" Icon="UserGray" NodeID="5">
<Nodes>
<ext:TreeNode Text="Concertos" NodeID="5.1">
<Nodes>
<ext:TreeNode NodeID="5.1.1" Text="Violin Concerto" Icon="Music" />
<ext:TreeNode NodeID="5.1.2" Text="Double Concerto - A Minor" Icon="Music" />
<ext:TreeNode NodeID="5.1.3" Text="Piano Concerto No. 1 - D Minor" Icon="Music" />
<ext:TreeNode NodeID="5.1.4" Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets" NodeID="5.2">
<Nodes>
<ext:TreeNode NodeID="5.2.1" Text="Piano Quartet No. 1 - G Minor" Icon="Music" />
<ext:TreeNode NodeID="5.2.2" Text="Piano Quartet No. 2 - A Major" Icon="Music" />
<ext:TreeNode NodeID="5.2.3" Text="Piano Quartet No. 3 - C Minor" Icon="Music" />
<ext:TreeNode NodeID="5.2.4" Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas" NodeID="5.3">
<Nodes>
<ext:TreeNode NodeID="5.3.1" Text="Two Sonatas for Clarinet - F Minor" Icon="Music" />
<ext:TreeNode NodeID="5.3.2" Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies" NodeID="5.4">
<Nodes>
<ext:TreeNode NodeID="5.4.1" Text="No. 1 - C Minor" Icon="Music" />
<ext:TreeNode NodeID="5.4.2" Text="No. 2 - D Minor" Icon="Music" />
<ext:TreeNode NodeID="5.4.3" Text="No. 3 - F Major" Icon="Music" />
<ext:TreeNode NodeID="5.4.4" Text="No. 4 - E Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Mozart" Icon="UserGray" NodeID="6">
<Nodes>
<ext:TreeNode Text="Concertos" NodeID="6.1">
<Nodes>
<ext:TreeNode NodeID="6.1.1" Text="Piano Concerto No. 12" Icon="Music" />
<ext:TreeNode NodeID="6.1.2" Text="Piano Concerto No. 17" Icon="Music" />
<ext:TreeNode NodeID="6.1.3" Text="Clarinet Concerto" Icon="Music" />
<ext:TreeNode NodeID="6.1.4" Text="Violin Concerto No. 5" Icon="Music" />
<ext:TreeNode NodeID="6.1.5" Text="Violin Concerto No. 4" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<AfterRender Handler="ExpandTree(this); SetNodeTree(this,'5.3.2');" />
</Listeners>
</ext:TreePanel>
</Items>
</ext:Panel>
</content>
</ext:Panel>
</West>
<Center Collapsible="false" Split="true">
<ext:Panel ID="Panel2" runat="server" Title="" AutoScroll="false" Draggable="false">
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:Panel>
</div>
</form>
</body>
</html>
Many thanks for any suggestion
Last edited by Daniil; Feb 09, 2012 at 12:18 PM.
Reason: [CLOSED]