EXTJS4擴展實例：如何使用filter查詢treepanel

我們在使用普通的store時，extjs提供了filterBy,filter等多種方法來過濾數據達到查詢效果，但在treepanel中的streeStore卻沒有實現這個查詢，於是，就有了這篇文章。

首先定義一個類'MyExtend.lib.TreeFilter'

Ext.define('MyExtend.lib.TreeFilter', {
	filterByText: function(text) {
		this.filterBy(text, 'text');
	},
	/**
	 * 根據字符串過濾所有的節點，將不符合條件的節點進行隱藏.
	 * @param 查詢字符串.
	 * @param 要查詢的列.
	 */
	filterBy: function(text, by) {

		this.clearFilter();

		var view = this.getView(),
			me = this,
			nodesAndParents = [];

		// 找到匹配的節點並展開.
		// 添加匹配的節點和他們的父節點到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]);

		// 將不在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]);
	}
});

　　接下來定義一個你自己的treepanel，並混入這個類

Ext.define('MyTreePanel',{
	extend:'Ext.tree.Panel',
	mixins:['MyExtend.lib.TreeFilter']
	
});

　　

后面的代碼我就省略了，用你定義的MyTreePanel來生成一個treepanel，然后使用
treepanel.filterByText('xxx') 或treepanel.filterBy('xxx','列名') 進行過濾查詢