1.1 Treefilter

[John Sourcer]

Hi All,

I have a tree of a +2000 nodes about 3 levels deep. It populates fine and quite quickly. I am testing treefilter before decding whether to round trip.

My code:

var root = myTree.getRootNode();
var term = txtFind.getValue();
var re = new RegExp(term,'i');
myFilter.filter(re,'text',root); 

works except that it only returns top level nodes matching the criteria and their children! So it doesn't find nodes that are below the 1st level.

Am I being stupid and missing something?

[Animal]

AsyncTreeNodes that are not viewed are not loaded. You have to expand a node once for its children to be loaded.

[John Sourcer]

Ahhh, shot Animal!

Is there a way around this or is it best to do this server side?

[Animal]

It's a browser side thing.

You'll have to do a deep expand, with collapse as the callback (with animation turned off so that you don't see it happen).

This will ensure that what you think is there, is really there!

[John Sourcer]

Looks like something to get my teeth into. Ta very much, Sir!

[Saeven]

Searching about for a 2.0 treefilter, I found this thread. The 2.0 TreeFilter however, wasn't behaving in the manner in which I expected...so I baked this code up. It works pretty rapidly, on the principle of marking used paths from the leaves.

var hiddenPkgs  = [];
var markCount	= [];

// filter the kb tree for hits
function filterTree(e){
	var text = e.target.value;
	Ext.each(hiddenPkgs, function(n){
		n.ui.show();
	});
	
	markCount  = [];	
	hiddenPkgs = [];
	
	if( text.trim().length > 0 ){
		kb_tree.expandAll();
		
		var re = new RegExp( Ext.escapeRe(text), 'i');
		kb_tree.root.cascade( function( n ){
			if( re.test(n.text) )
				markToRoot( n, kb_tree.root );
		});
		
		// hide empty packages that weren't filtered		
		kb_tree.root.cascade(function(n){
			if( ( !markCount[n.id] || markCount[n.id] == 0 ) && n != kb_tree.root ){
				n.ui.hide();
				hiddenPkgs.push(n);
			}
		});
	}
}

function markToRoot( n, root ){
	
	if( markCount[n.id] )
		return;
		
	markCount[n.id] = 1;
	
	if( n.parentNode != null )
		markToRoot( n.parentNode, root );
}

Use this on a text field with something like:

new Ext.form.TextField({
										emptyText:'Find a subject',
										listeners:{
											render: function(f){
												f.el.on('keydown', filterTree, f, {buffer: 350});
											}
										}
									})

Hope this saves someone some time! It will display all paths that lead to hits.

[fangzhouxing]

Saeven,thanks for your code, I have used it in my project.

Two questions:
1)I noticed that I must press space bar to make the inputed filter value to have effect on the tree. Is it a normal way?
2)In Ext 2.0 API Document query programe, the Ext.tree.TreeFilter is used,
I try to use TreeFilter instead, but did not succeed. Anyone can help?

[NoahK17]

This is almost exactly what I am looking for Saeven. I don't have time right now to look too deeply into it... but basically what I desire is this:

If a node is found that matches the search string, I want to show all children nodes (as deep as they go) under that matched node.

Any thoughts?

[anilsonawane]

hi,
this functionlity is not workin with column tree..?

can any one suggest how to search in column tree.?

take care

[vtmoren]

Can this code be applied to filter multiple trees from the one textfield?