[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