码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-14 16:52:09      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:cas   asc   false   展开   region   cti   匹配   push   ext.get   

   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树组件

标签:cas   asc   false   展开   region   cti   匹配   push   ext.get   

原文地址:http://www.cnblogs.com/piaopiaoqun/p/6062208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!