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

先来看看Ext的官方API的左上角
[img]http://dl.iteye.com/upload/attachment/243061/abd3e241-75c3-38bb-8dce-b0aa487b169e.png[/img]
本插件基于Ext3.0 可以非常轻松的实现上面的功能，你只需要为你的树配置一下插件，例如：


plugins: ['multifilter'],

本插件使用了笔者以前做的树过滤组件QM.ux.TreeFilter，最大的特点就是同时支持[color=red]拼音首字母和汉字模糊匹配[/color]，详细信息可以参考：[url]http://chemzqm.iteye.com/blog/653530[/url]
[b]示例效果：[/b]
[img]http://dl.iteye.com/upload/attachment/243069/285cb5e4-ef6c-3bf4-a4f2-a4db7d8a165d.png[/img]
[b]核心代码：[/b]


/**
 * 多功能树过滤插件，为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);