先来看看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
分享到:
相关推荐
NULL 博文链接:https://atian25.iteye.com/blog/1019910
Maven更新问题 今天Maven在更新的时候发现一直更新不成功,总结下解决方法。 在apache-maven-3.5.2/conf/setting.xml中加入以下配置即可解决 alimaven aliyun maven ... central junit junit Address/ ...
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...
eclipse插件 org.apache.axis2.eclipse.codegen.plugin_1.7.4.jar
主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
ecplise html编辑器tk.eclipse.plugin.htmleditor_2.2.0.jar 配合GEF插件能在eclipse里识别html的标签来方便编辑html页面。tk.eclipse.plugin.htmleditor_2.2.0.jar文件直接复制到eclipse\plugins里面即可
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....
主要介绍了Ubuntu18.04下解决Qt出现qt.qpa.plugin:Could not load the Qt platform plugin “xcb“问题,本文给大家分享解决方案,需要的朋友可以参考下
执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.field.ImageFileField 执照:麻省理工学院演示:论坛:Ext.ux.form.plugin.HtmlEditor 执照:麻省...
com.aware.plugin.ntptime NTPtime 是插件,也可以在 Github。 该插件允许您轻松地从 NTP 服务器获取当前时间并测量系统时钟漂移。 设置: status_plugin_ntptime:激活/停用插件 server_plugin_ntptime: ntp ...
QuickLook.Plugin.OfficeViewer.qlplugin V2 无需安装office或wps 使用方法:解压后,启动QuickLook,选中插件再按空格键,点击安装,退出重启即可
本人的一片博客,http://blog.csdn.net/jackieriver/article/details/78882194,所需要的一些插件
org.apache.axis2.eclipse.service.plugin_1.7.8插件文件,欢迎小伙伴下载
idea创建Maven项目时,报错显示Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.0.2:resources,并且Maven插件内看不到 mybatis-generator。如下图: 折腾了好久发现配置放错地方了,...
1、eclipse的html文件编辑插件。...这个插件可以弥补eclipse for java的这一缺陷。 3、插件导入后可以配置一下eclipse的文件关联,将对应的文件的打开方式关联到这个插件,以后html文件就默认使用本插件打开了。
tk.eclipse.plugin.htmleditor_2.2.0.jar,eclipse插件
gitignore.plugin.zsh 用于创建.gitignore文件的Zsh插件。 安装 : antigen bundle voronkovich/gitignore.plugin.zsh : zplug voronkovich/gitignore.plugin.zsh 或克隆此仓库,并将其添加到您的.zshrc中: ...
插件:biz.dfch.j.graylog2.plugin.filter.execscript d-fens GmbH, General-Guisan-Strasse 6, CH-6300 Zug, 瑞士 此 Graylog 过滤器插件可让您在 Graylog 节点上运行任意脚本。 有关如何的进一步说明和示例,请...
插件:biz.dfch.j.graylog2.plugin.filter.auditlog d-fens GmbH, General-Guisan-Strasse 6, CH-6300 Zug, 瑞士 此 Graylog2 过滤器插件可让您将所有传入消息发送到其他目的地以进行审计跟踪。 有关如何创建插件...