`

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

    博客分类:
  • Ext
阅读更多
先来看看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
  • 大小: 2.9 KB
  • 大小: 4.2 KB
2
1
分享到:
评论
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

相关推荐

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构,版本为v1.4,发布日期为2011年9月11日。重构通常意味着代码的改进,可能涉及性能优化、错误修复或功能增强。在4.0版本中,RowEditing插件的...

    extjs4.1-ux.rar

    6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext.ux.grid.plugin.SortMenu 9、Ext.ux.grid.plugin.MultipleSort 10、Ext.ux.window.EachDialog 11、Ext.ux.grid.property.Grid 12、Ext...

    32个常用Origin.Plugin插件.rar

    5. 用户界面扩展:某些插件可能添加了新的菜单项或工具栏,为用户提供更直观的访问方式,以便快速调用特定功能。 6. 文件导入导出:插件可能增强了Origin对多种格式数据文件的支持,比如Excel、CSV、文本、图像等,...

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    在Ext JS库中,`Ext.grid.plugin.RowExpander`是一个扩展插件,用于在网格行中添加可展开的详情区域。在Ext4.2版本中,用户可能遇到一个特定的问题,即`RowExpander`的`collapsebody`和`expandbody`事件无法正常触发...

    fine-plugin-com.fr.plugin.reset.userpasswd-1.0.zip

    "plugin.xml"文件是插件的配置文件,它定义了插件的元数据,包括插件的名称、版本、依赖项、启动和停止的逻辑等。在帆软Finereport中,这个文件是系统识别和管理插件的关键。通过解析"plugin.xml",系统可以知道何时...

    eclipse插件 org.apache.axis2.eclipse.codegen.plugin_1.7.4.jar

    eclipse插件 org.apache.axis2.eclipse.codegen.plugin_1.7.4.jar

    jenkins所需的插件等

    标题提及的 "jenkins所需的插件等" 暗示我们将讨论 Jenkins 插件的选择和安装,以及它们如何增强 Jenkins 的功能。在描述中,作者提到的一个博客链接提供了更多关于这些插件的详细信息。以下是一些关键的 Jenkins ...

    Maven使用tomcat8-maven-plugin插件.docx

    Maven 使用 tomcat8-maven-plugin 插件 Maven 是一个流行的构建自动化工具,它可以帮助开发者自动完成项目的编译、测试、打包、部署等任务。 Tomcat 是一个流行的 Web 服务器,Maven 提供了一个插件 tomcat8-maven-...

    Ext表格列锁定+多表头插件

    3. Ext.grid.plugin.GroupHeader:这是一个插件,用于创建多级表头。 4. Ext.view.BufferView:用于实现视口内的数据缓存和滚动优化。 在实际应用中,为了使用"LockingGridView+BufferView+GroupHeaderPlugin",...

    Ext Js权威指南(.zip.001

    9.4.5 为盒子模型提供调整大小的功能:ext.resizer.splitter / 445 9.4.6 手风琴布局:ext.layout.container.accordion / 447 9.4.7 锚固布局:ext.layout.container.anchor / 448 9.4.8 绝对定位布局:ext....

    Ext DateField控件 - 只选择年月插件

    总结来说,"Ext DateField控件 - 只选择年月插件"是一个方便易用的工具,能够帮助开发者在Ext JS应用程序中实现更精细的日期选择功能,专注于年月的选取,从而满足特定场景下的用户需求。通过合理地配置和集成,你...

    mzExt:Extjs 4.x的插件和扩展

    执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.field.ImageFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.plugin.HtmlEditor 执照:麻省...

    com.aware.plugin.ntptime:AWARE 插件,用于从 NTP 服务器获取时间并测量系统时钟漂移

    com.aware.plugin.ntptime NTPtime 是插件,也可以在 Github。 该插件允许您轻松地从 NTP 服务器获取当前时间并测量系统时钟漂移。 设置: status_plugin_ntptime:激活/停用插件 server_plugin_ntptime: ntp ...

    Extjs相关插件

    4. 树形插件:`Ext.tree.plugin.TreeDragDrop`允许在树形结构中进行拖放操作,实现节点的移动和排序。 5. 动画插件:如`Ext.fx.Anim`,为组件添加动画效果,提升用户体验。 三、如何使用ExtJS 插件 1. 引入插件:在...

    google.map.plugin插件下载

    "google.map.plugin.js" 文件很可能是这个插件的核心脚本,包含了实现这些功能的JavaScript代码。 在使用谷歌地图插件时,首先需要在你的项目中引入 "google.map.plugin.js" 文件。这通常通过在HTML文件中添加`...

    CygUtils.plugin

    win10下 MobaXterm 无法运行terminal窗口的插件。MobaXterm 可以使用ssh -X 打开没有安装可视化界面的服务器的可视化界面程序

Global site tag (gtag.js) - Google Analytics