以下是实现代码:
var matched = [];
var treeFilter = new Ext.tree.TreeFilter(this.agencyTree, {
clearBlank : true,
autoClear : true
});
function search() {
var text = seachField.getValue();//seachField为TextField输入框对象
treeFilter.clear();//treeFilter过滤条件
matched = [];//匹配的节点
// 如果输入的数据不存在,就执行clear()
if (!text) {
return;
}
tree.expandAll();
// 根据输入制作一个正则表达式,'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
// 找出所有匹配的结点
tree.root.cascade(function(n) {
if (re.test(n.attributes['text'])) {
matched.push(n);
}
}, this);
// 从每个叶子结点向根方向处理,处理所有结点的枝叶,
// 如果该枝叶包含匹配的结点,则保留,否则裁剪掉(隐藏)
tree.root.cascade(function(n) {
if (n.isLeaf()) {
// 处理每一条子结点路径
n.bubble(function(nbb) {
// 从叶子到根,逐个剪掉
var contain = false;
for (var mted = 0; mted < matched.length; mted++) {
if (nbb.contains(matched[mted]) || nbb == matched[mted]) {
// 包含匹配的结点
contain = true;
break;
}
}
// 把不包含匹配结点的结点隐藏
if (!contain) {
nbb.ui.hide();
treeFilter.filtered[nbb.id] = nbb;
}
}, this);
}
}, this);
};
分享到:
相关推荐
可以使用`store.filter()`方法,或者在store配置中设置`autoFilter: true`,然后监听`keyup`事件来实时更新过滤条件。 ```javascript // 监听搜索框的keyup事件 var searchField = Ext.create('Ext.form.field.Text...
5. **中文 API**:提供的中文 API 文档是开发者的重要参考资料,它详尽地介绍了 Ext 3.0 中的类、方法、属性和事件。通过查阅 API,开发者可以快速找到对应的函数和配置项,解决在开发过程中遇到的问题。 6. **ext_...
在本文中,我们将深入探讨Ext.Net框架中的几个关键控件及其属性,包括ExtPanel、Resizable、GridPanel、TreeNode以及Store和ComboBox。这些控件在构建富客户端Web应用程序时扮演着重要角色。 首先,让我们来看看Ext...
在Ext JS中,"树"(Tree)是一种数据展示组件,它允许用户以层级结构显示数据。树形结构常用于组织和导航大量的分类信息,例如文件系统、组织架构或者网站导航菜单。 在Ext JS中,树(TreePanel)是用于显示树数据...
这篇博客文章“Rails中应用Ext.tree:以中国的省市地区三级联动选择为例”提供了一个实用的示例,教我们如何利用Ext.js库中的Tree组件来实现这种功能。 首先,让我们了解Rails和Ext.js的基本概念。Rails是基于Ruby...
+去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...
在这个例子中,`TreeNode`是一个自定义的Java类,代表树的一个节点。`execute`方法将`nodes`列表转换为JSONArray,并将其返回给客户端。 通过以上方式,EXTJS Tree可以与Struts2和json-lib协同工作,实现动态加载和...
2. 在 `web.xml` 中配置 Struts2 过滤器,确保 Struts2 正确运行。 3. 在 Struts2 动作类中,使用 json-lib 将对象转换为 JSON 数组。例如: ```java import net.sf.json.JSONArray; import ...
- **TreeNode**: 树形结构的基本单元,代表树中的一个节点,包含了文本、图标、子节点等信息。 - **TreePanel**: 显示树形数据的容器,它继承自Ext.grid.Panel,并添加了树状布局和特有的功能。 - **Store**: ...
8. **搜索和过滤**:提供搜索和过滤功能,帮助用户快速定位和筛选树中的特定内容。 在实际开发中,eXtree通常与其他JavaScript框架如ExtJS、Sencha Touch一起使用,它们提供了丰富的组件库和强大的布局管理,使得...
- **TreePanel**:Ext JS中的TreePanel类提供了树形结构的视图,它包含了节点(TreeNode)的管理、拖放操作、节点的展开与折叠等功能。 - **TreeNode**:每个树节点都是一个TreeNode对象,包含数据、子节点以及...
为了解决这个问题,EXTJS提供了一个名为“树型分页”(Tree Paging)的特性。本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理...
+去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...
在ExtJS中,树形组件通过`Ext.tree.TreePanel`类实现,它能够方便地展示和操作这种层级关系。 2. **配置简单**:使用ExtJS构建树形视图非常便捷,只需要几行代码即可实现。开发者可以通过配置`Ext.tree.TreeLoader`...
- **Ext类库**: 是ExtJS的基础,提供了一系列工具方法和类,用于简化DOM操作、AJAX请求等。 - **组件**: 是ExtJS的基本构建单元,每个组件都有自己的生命周期和事件处理机制。 - **组件的使用**: 了解如何实例化...