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

    });

转载于:https://www.cnblogs.com/piaopiaoqun/p/6062208.html