[Ext插件]QM.plugin.MutilTreeFilter：为树添加过滤、展开、收缩功能

先来看看Ext的官方API的左上角

本插件基于Ext3.0 可以非常轻松的实现上面的功能，你只需要为你的树配置一下插件，例如：

plugins: ['multifilter'],

本插件使用了笔者以前做的树过滤组件QM.ux.TreeFilter，最大的特点就是同时支持拼音首字母和汉字模糊匹配，详细信息可以参考：http://chemzqm.iteye.com/blog/653530
示例效果：

核心代码：

/**
 * 多功能树过滤插件，为TreePanel的tbar添加一个具备拼音和汉字双重过滤功能的textfield
 * 
 * 依赖：QM.ux.TreeFilter、QM.lib
 * 
 * 注意：tbar是无法动态创建的，请确保构造树的时候配置了tbar属性
 *
 * v1.1:修复3.1下tbar无法显示的问题
 * 
 */
QM.plugin.MutilTreeFilter = Ext.extend(Object, {
    index: 0,//输入域插入tbar的位置索引
    clearAction:'expand',//树节点全部显示时状态，默认全部展开
    width:120,//输入域宽度
	enableButtons:true,//是否添加收缩和展开按钮
	ignoreFolder:true,//过滤时忽略父节点
	
	constructor:function(config){
		Ext.apply(this,config);	
	},
    init: function(tree){
       tree.on('afterrender', this.onRender, this);
	   this.filter =  new QM.ux.TreeFilter(tree, {
              clearAction: this.clearAction,
			  ignoreFolder: this.ignoreFolder
        });
    },
    onRender: function(tree){
        var tbar = tree.getTopToolbar();			
        var field = new Ext.form.TextField({
            width: this.width,
            emptyText: '快速检索',
            enableKeyEvents: true,
            listeners: {
                keyup: {//添加键盘点击监听
                    fn: function(t, e){
                        this.filter.filter(t.getValue());
                    },
                    buffer: 350,
					scope:this
                }
            }
        });
		if (this.enableButtons) {
			tbar.insertButton(this.index, [' ', ' ', {
				iconCls: 'icon-expand-all',
				tooltip: '全部展开',
				handler: function(){
					tree.root.expand(true);
				}
			}, '-', {
				iconCls: 'icon-collapse-all',
				tooltip: '全部收缩',
				handler: function(){
					tree.root.collapse(true);
				}
			}]);
		}
		tbar.insert(this.index,field);
                tbar.doLayout();
    }
});
Ext.preg('multifilter', QM.plugin.MutilTreeFilter);

示例直接放到Ext根目录下即可用浏览器打开查看，有什么问题请给我email

评论

7 楼 jocxs 2011-04-18  

这几天正好改善客户体验界面，正好需要这个功能，真的很有用，我用的就是EXT3.3，没有出现任何问题，感谢！

6 楼 silvernet 2011-03-26  

很好很强大！

5 楼 elfkingw 2010-11-14  

下面有答案了，没看到

4 楼 elfkingw 2010-11-14  

这个例子在ext3.3有不兼容了显示不出来toolbar

3 楼 eredlab 2010-05-17  

恩，不错！照你说的修改，弄好了！
不过偶补充一下：给后来人明确点。在3.1中需要做如下修改：
PingyinFilter.js中第349行后加入如下代码：

tbar.doLayout();

2 楼 chemzqm 2010-05-15  

eredlab 写道

我下载了怎么看不见Tbar上的内容啊 只有一棵树 没有tBar 我的SDK版本是extjs3.1!5555555555555555555

3.2可以显示，3.1确实无法显示tbar，只需加一行代码让tbar重新layout即可

1 楼 eredlab 2010-05-15  

我下载了怎么看不见Tbar上的内容啊 只有一棵树 没有tBar 我的SDK版本是extjs3.1!5555555555555555555