1.1 Treefilter

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:

PHP 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?:-/

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

Ahhh, shot Animal!

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

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!

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

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.

Code:

---

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:

Code:

---

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.

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?

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? :)

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

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

take care

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