TreePanel in Dropdownfield do not scoll to the selected node

  1. #1

    TreePanel in Dropdownfield do not scoll to the selected node

    I have a question about the TreePanel in Dropdownfield.
    After I set the value to the dropdownfield use setValue() method,the treepanel has select the node,but it doesn't scoll to the node selected.
    When I use the 1.7 version,it can work with the node.ensureVisible(),but it has removed by 2.X version.When I use the focusRow(),it doesn't work.
    Below is my example.
    Example.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="lds_Example" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
        var SelectTNode = function (record,f) {
                if (record.data.leaf) {
    
                    f.setValue(record.getId(), record.data.Path);
    
                    f.focus();
    
                }
                else {
                    Ext.net.Notification.show({ title: "Message", html: "Please choose the leaf node!", hideDelay: 2000, iconCls: "icon-information" });
                }
            }
    
            var filterTree = function (tf, e) {
                var tree = App.TreePanel1,
                    text = tf.getRawValue();
    
    
                tree.clearFilter();
    
    
                if (Ext.isEmpty(text, false)) {
                    return;
                }
    
                if (e.getKey() === Ext.EventObject.ESC) {
                    clearFilter();
                } else {
                    var re = new RegExp(".*" + text + ".*", "i");
    
    
                    tree.filterBy(function (node) {
                        var match = re.test(node.data.text)
    
    
                        if (!match)
                            match = checkParent(node, re);
    
    
                        return match;
                    });
                }
            };
            var checkParent = function (node, re) {
                var result = false;
                var parent = node.parentNode;
    
    
                while (parent != undefined) {
    
    
                    if (re.test(parent.data.text)) {
    
    
                        result = true;
                        break;
                    }
                    parent = parent.parentNode;
                };
    
                return result;
    
    
            };
    
            var clearFilter = function () {
                var field = App.TriggerField1,
                    tree = App.TreePanel1;
    
                field.setValue("");
                tree.clearFilter(true);
                tree.getView().focus();
            };
    
            var syncValue = function (value) {
                var tree = this.component;
                if (tree.rendered && !Ext.isEmpty(value)) {
                    tree.getSelectionModel().clearSelections();
                    var node = tree.store.getNodeById(value);  //tree.getNodeById(value);
    
                    if (node) {
                        tree.getSelectionModel().select(node, true);
                        tree.getView().focusRow(node);
                    }
                }
                else if (tree.rendered) {
                    tree.getSelectionModel().clearSelections();
                }
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" />
       <ext:DropDownField 
                ID="Field1" 
                runat="server" 
                FieldLabel="AreaInfo"
    		    Editable="false" 
    		    Width="350"
    		    TriggerIcon="SimpleArrowDown" 
    		    Mode="ValueText">
                <Component>
                    <ext:TreePanel ID="TreePanel1" 
                        runat="server" 
                        Title="AreaInfo"
                        Icon="Accept"
                        Height="300"
                         Width="400"
                        Shadow="true"
                        UseArrows="true"
                        AutoScroll="true"
                        Animate="true"
                        ContainerScroll="true">
                        <Fields>
                    <ext:ModelField Name="Path" />
                </Fields>
                        <TopBar>
                    <ext:Toolbar ID="Toolbar2" runat="server">
                        <Items>
                            <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
                            <ext:ToolbarSpacer />
                            <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" />
                                </Triggers>
                                
                                <Listeners>
                                    <KeyUp Fn="filterTree" Buffer="250" />
                                    <TriggerClick Handler="clearFilter();" />
                                </Listeners>
                            </ext:TriggerField>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                        <Listeners>
                        <ItemClick Handler="SelectTNode(record,#{Field1});" />
                        </Listeners>  
                        <SelectionModel>
                        <ext:TreeSelectionModel ID="TreeSelectionModel1" runat="server"/>
                        </SelectionModel> 
                     </ext:TreePanel>
                </Component>
                <Listeners>
                    <Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="20" />
                </Listeners>
                <SyncValue Fn="syncValue" />
            </ext:DropDownField>
            <ext:Button runat="server" ID="btn" Text="SetValue">
            <Listeners>
            <Click Handler="CompanyX.SetValue()"></Click>
            </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
    Example.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class lds_Example : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                BuildTree();
            }
        }
    
    
        private void BuildTree()
        {
            Ext.Net.Node root = new Ext.Net.Node();
            root.NodeID = "0";
            root.Text = "America";
            root.Expanded = true;
            TreePanel1.Root.Add(root);
    
            Node node01 = new Node { NodeID = "j", Text = "Arkansas" };
            node01.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Arkansas", Mode = ParameterMode.Value });
    
            Node node0 = new Node { NodeID = "i", Text = "Massachusetts" };
            node0.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Massachusetts", Mode = ParameterMode.Value });
    
    
            Node node1 = new Node { NodeID = "a", Text = "Georgia" };
            node1.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Georgia", Mode = ParameterMode.Value });
    
    
            Node node2 = new Node { NodeID = "b", Text = "Alabama" };
            node2.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Alabama", Mode = ParameterMode.Value });
    
    
            Node node3 = new Node { NodeID = "c", Text = "California" };
            node3.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/California", Mode = ParameterMode.Value });
    
    
    
            Node child1 = new Node { NodeID = "d", Text = "Atlanta", Leaf = true };
            child1.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Georgia/Atlanta", Mode = ParameterMode.Value });
    
            Node child2 = new Node { NodeID = "e", Text = "Montgomery", Leaf = true };
            child2.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Alabama/Montgomery", Mode = ParameterMode.Value });
    
            Node child3 = new Node { NodeID = "f", Text = "Sacramento", Leaf = true };
            child3.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/California/Sacramento", Mode = ParameterMode.Value });
    
            Node child4 = new Node { NodeID = "g", Text = "Los Angeles", Leaf = true };
            child4.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/California/Los Angeles", Mode = ParameterMode.Value });
    
    
            Node child5 = new Node { NodeID = "h", Text = "Boston", Leaf = true };
            child5.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Massachusetts/Boston", Mode = ParameterMode.Value });
    
            Node child6 = new Node { NodeID = "l", Text = "Little rock", Leaf = true };
            child6.CustomAttributes.Add(new ConfigItem { Name = "Path", Value = "America/Arkansas/Little rock", Mode = ParameterMode.Value });
    
            node0.Children.Add(child5);
            node1.Children.Add(child1);
            node2.Children.Add(child2);
            
            node3.Children.Add(child4);
            node3.Children.Add(child3);
            node01.Children.Add(child5);
    
            root.Children.Add(node01);
            root.Children.Add(node0);
            root.Children.Add(node1);
            root.Children.Add(node2);
            root.Children.Add(node3);
            
        }
        [DirectMethod]
        public void SetValue()
        {
            this.Field1.SetValue("g", "America/California/Los Angeles");
        }
    }
    Click image for larger version. 

Name:	does not scoll to the selected node.jpg 
Views:	12 
Size:	25.6 KB 
ID:	7380
    Beg your reply!
  2. #2
    i met the same problem, and i searched this thread, why admin do not answer ?

Similar Threads

  1. Replies: 4
    Last Post: Mar 22, 2015, 4:04 PM
  2. TreePanel, get selected node
    By fatnjazzy in forum 2.x Help
    Replies: 7
    Last Post: Sep 12, 2013, 7:31 AM
  3. Replies: 11
    Last Post: Feb 06, 2013, 5:09 PM
  4. Selected Node Id of a TreePanel
    By Z in forum 1.x Help
    Replies: 1
    Last Post: Jul 21, 2010, 8:26 AM
  5. Treepanel - Set Selected Node
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Dec 01, 2009, 4:46 PM

Tags for this Thread

Posting Permissions