我们在使用普通的store时,extjs提供了filterBy,filter等多种方法来过滤数据达到查询效果,但在treepanel中的streeStore却没有实现这个查询,于是,就有了这篇文章。

首先定义一个类'MyExtend.lib.TreeFilter'

Ext.define('MyExtend.lib.TreeFilter', {
filterByText: function(text) {
this.filterBy(text, 'text');
},
/**
* 根据字符串过滤所有的节点,将不符合条件的节点进行隐藏.
* @param 查询字符串.
* @param 要查询的列.
*/
filterBy: function(text, by) { this.clearFilter(); var view = this.getView(),
me = this,
nodesAndParents = []; // 找到匹配的节点并展开.
// 添加匹配的节点和他们的父节点到nodesAndParents数组.
this.getRootNode().cascadeBy(function(tree, view) {
var currNode = this; if (currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
me.expandPath(currNode.getPath()); while (currNode.parentNode) {
nodesAndParents.push(currNode.id);
currNode = currNode.parentNode;
}
}
}, null, [me, view]); // 将不在nodesAndParents数组中的节点隐藏
this.getRootNode().cascadeBy(function(tree, view) {
var uiNode = view.getNodeByRecord(this); if (uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {
Ext.get(uiNode).setDisplayed('none');
}
}, null, [me, view]);
}, clearFilter: function() {
var view = this.getView(); this.getRootNode().cascadeBy(function(tree, view) {
var uiNode = view.getNodeByRecord(this); if (uiNode) {
Ext.get(uiNode).setDisplayed('table-row');
}
}, null, [this, view]);
}
});

  接下来定义一个你自己的treepanel,并混入这个类

Ext.define('MyTreePanel',{
extend:'Ext.tree.Panel',
mixins:['MyExtend.lib.TreeFilter'] });

  

后面的代码我就省略了,用你定义的MyTreePanel来生成一个treepanel,然后使用
treepanel.filterByText('xxx') 或treepanel.filterBy('xxx','列名') 进行过滤查询

最新文章

  1. RP
  2. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
  3. Android -- Apk安装简诉
  4. n全排列输出和 n个数的组合(数字范围a~b)
  5. java List 排序 Collections.sort()
  6. 【管理工具】Git的安装与使用
  7. VMware下打开Chrome OS遇到没有网络连接可用
  8. 【模拟】Codeforces 705A Hulk
  9. Mysql数据备份与恢复命令
  10. Palindrome 回文数
  11. Python+Requests接口测试教程(2):
  12. Extensions in UWP Community Toolkit - Mouse Cursor
  13. 【BZOJ2241】【Sdoi2011R1D1】打地鼠
  14. [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
  15. JVM调优的几种策略
  16. Python开发之---PyCharm初体验
  17. 【WebAPI】从零开始学会使用.NET Core WebAPI
  18. js实现表单
  19. P5015 标题统计
  20. intelliJ IDEA 破解,亲测有效

热门文章

  1. Oracle —— 如何执行SQL文件
  2. FAX modem和传真协议简介
  3. 使用iLO远程管理HP系列服务器
  4. 在eclipse pydev中使用PEP8来规范python代码
  5. tomcat+redis会话共享
  6. 纯CSS绘制的三角形箭头图案【原创】
  7. jquery给动态添加的dom元素绑定事件
  8. ubuntu16.04下安装opencv3.1.0
  9. MapReduce计算之——hadoop中的Hello World
  10. netcat/curl/wget/smb/icmp ping -p/dns/telnet