Extjs4.x中已经取消了组件Ext.Tree.TreeFilter功能，却掉落了树形布局的过滤功能，要实现该功能只能自己写了.

Tree节点筛选UI很简单，一个Tbar，一个trigger即可办理问题，剩下的是逻辑代码了。

1.tbar没啥好解析的

2.trigger几个对照紧张的属性

澳门永利的所有网址是多少triggerCls：文本框右侧的按钮样式，主要有4种

x-form-clear-trigger// the X icon

澳门永利的所有网址是多少x-form-search-trigger// the magnifying glass iconx-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