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

    });