Extjs4xExttreePanel过滤Filter以及triggerfield的使用(亲测代码可用).docxVIP

Extjs4.x Ext.tree.Panel 过滤Filter以及trigger field的使用（亲测代码可用）Extjs4.x中已经取消了组件Ext.Tree.TreeFilter功能，却掉了树形结构的过滤功能，要实现该功能只能自己写了.Tree节点筛选UI很简单，一个Tbar，一个trigger即可解决问题，剩下的是逻辑代码了。1.tbar没啥好解析的2.trigger几个比较重要的属性triggerCls：文本框右侧的按钮样式，主要有4种x-form-clear-trigger // the X iconx-form-search-trigger // the magnifying glass iconx-form-trigger // the down arrow (default for combobox) iconx-form-date-trigger // the calendar icon (just in case)onTriggerClick：单击右侧按钮的事件emptyText：值为空时候显示的文字hideTrigger：是否显示触发按钮3.剩下最重要的一个是逻辑处理类完整的案例代码如下://先定义一个树状列表过滤类/** * 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 arent in nodesAndParentsthis.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.getRootN