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. 【JavaScript吉光片羽】遭遇IE8

    最初对做兼容性的认知只停留在UI层面,但其实UI层面都还好,因为毕竟你可以直接看得见现象,更为重要的是在JavaScript层面,因为这个部分涉及到功能性,前者最多是体验性的问题.下面扯一下这几天遇到 ...

  2. ASP.NET MVC Model元数据(五)

    ASP.NET MVC Model元数据(五) 前言 在上一篇中我们描述了应用于Model上面的各种用于显示控制的特性类,在本篇中将详细的介绍这些特性类的应用,虽然它们跟Model元数据的直接关系并不 ...

  3. ABP框架 - 缓存

    文档目录 本节内容: 简介 ICacheManager ICache ITypedCache 配置 实体缓存 EntityCache 是如何工作 Redis 缓存集成 简介 ABP提供了一个缓存接口, ...

  4. python的赋值

    python的赋值其实就是引用,我们用python的id函数看一下: 然而令人蛋疼的事情发生了, 为什么会给一个新的c赋值1,它与上面的a和b的id一样呢. 原来是python会认为一些小的整形会经常 ...

  5. Error on line -1 of document : Premature end of file. Nested exception: Premature end of file.

    启动tomcat, 出现, ( 之前都是好好的... ) [lk ] ERROR [08-12 15:10:02] [main] org.springframework.web.context.Con ...

  6. Alcatraz 的安装和删除

    Xcode 所有的插件都安装在目录: ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/ 你也可以手工切换到这个目录来删除插件 ...

  7. Redis之AOF备份

    redis在进行备份的时候有2种方式:1.RDB:2.AOF:现在主要讲哈AOF的备份 1.找到redis.config配置文件,大部分下载下来和redis-service同目录: 2.打开redie ...

  8. Oozie分布式任务的工作流——邮件篇

    在大数据的当下,各种spark和hadoop的框架层出不穷.各种高端的计算框架,分布式任务如乱花般迷眼.你是否有这种困惑!--有了许多的分布式任务,但是每天需要固定时间跑任务,自己写个调度,既不稳定, ...

  9. Android数据存储之GreenDao 3.0 详解

    前言: 今天一大早收到GreenDao 3.0 正式发布的消息,自从2014年接触GreenDao至今,项目中一直使用GreenDao框架处理数据库操作,本人使用数据库路线 Sqlite----> ...

  10. scikit-learn 梯度提升树(GBDT)调参小结

    在梯度提升树(GBDT)原理小结中,我们对GBDT的原理做了总结,本文我们就从scikit-learn里GBDT的类库使用方法作一个总结,主要会关注调参中的一些要点. 1. scikit-learn ...