Extjs4.x Ext.tree.Panel 过滤Filter以及trigger field的使用
2013-06-25 23:18
225 查看
Extjs4.x中已经取消了组件Ext.Tree.TreeFilter功能,却掉了树形结构的过滤功能,要实现该功能只能自己写了.
Tree节点筛选UI很简单,一个Tbar,一个trigger即可解决问题,剩下的是逻辑代码了。
1.tbar没啥好解析的
2.trigger几个比较重要的属性
triggerCls:文本框右侧的按钮样式,主要有4种
onTriggerClick:单击右侧按钮的事件
emptyText:值为空时候显示的文字
hideTrigger:是否显示触发按钮
更多请参考:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Trigger-cfg-hideTrigger
3.剩下最重要的一个是逻辑处理类
完整的案例代码如下:
如果你想对节点的中文做些处理,例如按照拼音首字母进行搜索,只需要变更如下这句代码即可
Tree节点筛选UI很简单,一个Tbar,一个trigger即可解决问题,剩下的是逻辑代码了。
1.tbar没啥好解析的
2.trigger几个比较重要的属性
triggerCls:文本框右侧的按钮样式,主要有4种
x-form-clear-trigger // the X icon x-form-search-trigger // the magnifying glass icon x-form-trigger // the down arrow (default for combobox) icon x-form-date-trigger // the calendar icon (just in case)
onTriggerClick:单击右侧按钮的事件
emptyText:值为空时候显示的文字
hideTrigger:是否显示触发按钮
更多请参考:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Trigger-cfg-hideTrigger
3.剩下最重要的一个是逻辑处理类
完整的案例代码如下:
Ext.define("WMS.view.Tree", { extend: 'Ext.tree.Panel', alias: 'widget.wmsTree', id: 'wmsMenuTreePanel', title: "功能导航", margins: '0 0 0 3', width: 200, region: 'west', animate: true, store: 'VPTreeMenu', autoScroll: true, rootVisible: false, loadMsg: true, collapsible: true,//是否可以折叠 split: true, tools: [{ type: 'expand', handler: function () { Ext.getCmp("wmsMenuTreePanel").expandAll(); } }, { type: 'collapse', handler: function () { Ext.getCmp("wmsMenuTreePanel").collapseAll(); } }], //这里不要忘记 mixins: { treeFilter: 'WMS.view.TreeFilter' }, tbar: [{ xtype: 'trigger', triggerCls: 'x-form-clear-trigger', onTriggerClick: function () { this.setValue(''); Ext.getCmp("wmsMenuTreePanel").clearFilter(); }, width:'100%', emptyText:'快速检索功能', enableKeyEvents: true, listeners: { keyup: { fn: function (field, e) { if (Ext.EventObject.ESC == e.getKey()) { field.onTriggerClick(); } else { Ext.getCmp("wmsMenuTreePanel").filterByText(this.getRawValue()); } } } } }] });
/** * Add basic filtering to Ext.tree.Panel. Add as a mixin: * mixins: { * treeFilter: 'WMS.view.TreeFilter' * } */ Ext.define('WMS.view.TreeFilter', { filterByText: function(text) { this.filterBy(text, 'text'); }, /** * Filter the tree on a string, hiding all nodes expect those which match and their parents. * @param The term to filter on. * @param The field to filter on (i.e. 'text'). */ filterBy: function(text, by) { this.clearFilter(); var view = this.getView(), me = this, nodesAndParents = []; // Find the nodes which match the search term, expand them. // Then add them and their parents to nodesAndParents. this.getRootNode().cascadeBy(function(tree, view){ var currNode = this; if(currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) { me.expandPath(currNode.getPath()); while(currNode.parentNode) { nodesAndParents.push(currNode.id); currNode = currNode.parentNode; } } }, null, [me, view]); // Hide all of the nodes which aren't in nodesAndParents this.getRootNode().cascadeBy(function(tree, view){ var uiNode = view.getNodeByRecord(this); if(uiNode && !Ext.Array.contains(nodesAndParents, this.id)) { Ext.get(uiNode).setDisplayed('none'); } }, null, [me, view]); }, clearFilter: function() { var view = this.getView(); this.getRootNode().cascadeBy(function(tree, view){ var uiNode = view.getNodeByRecord(this); if(uiNode) { Ext.get(uiNode).setDisplayed('table-row'); } }, null, [this, view]); } });
如果你想对节点的中文做些处理,例如按照拼音首字母进行搜索,只需要变更如下这句代码即可
currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1 更多扩展,可以自己修改类 WMS.view.TreeFilter
相关文章推荐
- Flex使用ArrayCollection的filterFunction属性过滤DataGrid
- 使用libvirt的networkfilter对网络进行过滤
- Revit二次开发——加快过滤速度,以及对ElementIntersectsSolidFilter的API的Bug的处理办法
- Flex 使用ArrayCollection的FilterFunction进行数据过滤
- PHP中使用Filter进行数据安全过滤
- QDirModel使用QSortFilterProxyModel过滤指定磁盘和非系统盘
- minifilter开发文件过滤驱动、以及syser调试的经验
- Flex 使用ArrayCollection的FilterFunction进行数据过滤
- Scala 容器基础(十七):使用filter方法过滤集合元素
- 使用PHP自带的过滤验证函数:Filter
- 基于Filter-Hook Driver(使用ipfirewall.h)的IP过滤驱动
- 使用vue的过滤器filter,在qq浏览器以及手机报错,谷歌chrom运行好着的"[Vue warn]: Error compiling template:
- html:optionsCollection 的 filter 过滤属性使用心得 - 解决空格不能显示的问题
- PHP中使用Filter进行数据安全过滤
- spark scala 对dataframe进行过滤----filter方法使用
- java的List中使用filter过滤出符合特定条件的元素List
- 使用easyUI datagrid的filter时,当value是空时候如何过滤
- 使用Logstash filter grok过滤日志文件
- PHP中使用Filter进行数据安全过滤
- 使用session.createFilter()完成one-to-many关联关系的集合过滤