EXTJS4扩展实例：如何使用filter查询treepanel

来源：互联网发布：win10网络连接不可用编辑：程序博客网时间：2024/04/27 23:26

原文出自：

http://www.cnblogs.com/zdkjob/p/3593515.html

我们在使用普通的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','列名') 进行过滤查询。

0 0