Dec 19, 2013, 2:12 AM
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
Beg your reply!
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.csusing 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");
}
}
Beg your reply!