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;
 //    alert(currNode.data[by]+'  '+by+'  '+text);
                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]);
        }
    });
    Ext.define('MyTreePanel',{
        extend: 'Ext.tree.Panel',
        mixins:[ 'MyExtend.lib.TreeFilter']
        
    });
 
 var treePanel = Ext.create( 'MyTreePanel', {
        id: 'tree-panel',
        title: 'Sample Layouts',
        region: 'center',
        split: true,
        height: 360,
        minSize: 150,
        rootVisible: false,
        autoScroll: true,
        store: store
    });

Extjs5 tree扩展----treepanel树组件的更多相关文章

  1. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...

  2. 第二百二十六节,jQuery EasyUI,Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

  3. Tree( 树) 组件[4]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...

  4. Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...

  5. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  6. 扩展 jquery miniui 组件实现自动查询数据

    主题 之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩 ...

  7. Expression Tree 扩展MVC中的 HtmlHelper 和 UrlHelper

    表达式树是LINQ To everything 的基础,同时各种类库的Fluent API也 大量使用了Expression Tree.还记得我在不懂expression tree时,各种眼花缭乱的A ...

  8. 基于HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  9. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

随机推荐

  1. ES6+ 现在就用系列(二):let 命令

    系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...

  2. 敏捷团队中的QA由来

    QA,全称为Quality Analyst,即质量分析师(有些称为Quality Assurance,即质量保证师).为什么它总跟质量扯在一块?感觉这个角色明明做的都是测试的事情,为什么不直接叫做te ...

  3. [转载]Google Guava官方教程(中文版)

      原文链接  译文链接 译者: 沈义扬,罗立树,何一昕,武祖  校对:方腾飞 引言 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] ...

  4. Atitit各种SDM 软件开发过程SDP sdm的ddd tdd bdd设计

    Atitit各种SDM 软件开发过程SDP sdm的ddd tdd bdd设计 1.1. software development methodology (also known as SDM 1 1 ...

  5. Android-横竖屏切换问题(转)

    先附上链接:http://www.cnblogs.com/xiaoQLu/p/3324503.html 项目要求要做横竖屏,发现横屏的时候,生命周期函数会乱执行,网上找了一大堆资料. 结果如下: 只需 ...

  6. 小知识:C#可选参数的一个陷阱

    一.背景: 互联网行业,为了降低程序维护.升级的部署风险,往往会将程序拆分成很多项目,编译成多个dll部署,这样发布的时候,只需要部署修改过的dll即可.   二.问题: 有一个函数,在很多个地方被使 ...

  7. jQuery 插件-(初体验一)

    1.jquery有2个扩展方法: jquery.fn.extend=jquery.prototype.extend jquery.extend (两者的区别放在后面文章说) 2.具体实例结构: //创 ...

  8. WPF自定义RoutedEvent事件代码段

    今天在写东西的时候,发现常用的代码段里没有RoutedEvent的,因此,写了一个代码段,方便以后使用,顺便记录一下,如何做代码段. 1.在项目中新建一个XML文件,将扩展名修改为snippet. 2 ...

  9. angular2系列教程(二)模板语法

    今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子

  10. IE兼容性问题汇总【持续更新中】

    问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...