Extjs5 tree扩展----treepanel树组件

 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

    });