Need simple working example of a tree filter for extjs 3.4

Question

How would I apply a tree filter a tree panel?

I know this may seem like a simple question, but I'm new to extjs dealing with some complex code (from my perspective). I can't figure out how to apply a tree filter to a tree panel. I found the documentation on tree filters here , but I don't know how to use one on a tree panel.

Here's the code of my tree panel:

{                                       
    xtype: 'treepanel',
    loader: new Ext.tree.TreeLoader(),
    itemId:'TreePanelThisUserCanSee',
    rootVisible: false,
    border: true,
    autoScroll: true,
    hideCollapseTool: true,
    animate: false,
    getSelectedArray: function () {
        var selNodes = this.getChecked();
        var msg = '';
        var assignArray = new Array();
        Ext.each(selNodes, function(node) {
            if(!node.disabled) {
                if(msg.length > 0){
                    msg += ', ';
                }
                msg += node.id;
                assignArray[assignArray.length] = node.id;
            }
        });
        return assignArray;
    },
    root: new Ext.tree.AsyncTreeNode({
        text: 'Locations',
        draggable: false,
        id: 'root*node',
        leaf: false,
        expanded: true,
        expandable: false,
        children: [] // must have this to programatically add
    }),
    listeners: {
        'checkchange': function(node, checked) { 
        if(checked) {
            if( node.hasChildNodes() ) {
                node.expand(false, false);
                node.eachChild(function () {
                    this.ui.toggleCheck(true);
                    if(this.hasChildNodes()) {
                        this.eachChild(function () {
                            this.ui.toggleCheck(true);
                        });
                    }
                });
            }
        } else {
            node.eachChild(function () {
            this.ui.toggleCheck(false);
            if(this.hasChildNodes()) {
                this.eachChild(function () {
                    this.ui.toggleCheck(false); 
                });
            }                                                       
        });
    }
}
}
}

Answer 1

Read this thread and check this example of remote tree with filter.

Also you can check this code:

var config = {
        readOnly: false,
        isExpand: false,
        mode: 'local',
        treeFilter:  new Ext.tree.TreeFilter(this.getTree(), {
            autoClear: true,
            filterBy : function(fn, scope, startNode){
                startNode = startNode || this.tree.root;
                if(this.autoClear){
                    this.clear();
                }
                var found = {};
                var af = this.filtered, rv = this.reverse;
                var f = function(n){
                    if(n == startNode){
                        return true;
                    }
                    if(af[n.id]){
                        return false;
                    }
                    var m = fn.call(scope || n, n);
                    if(!m || rv){
                        af[n.id] = n;
                        //                        n.ui.hide();
                        //                        return false;
                        return true;
                    }

                    found[n.id] = n;
                    return true;
                };

                startNode.cascade(f);

                for(var idf in found){
                    if(typeof idf != "function"){
                        var curFoundItem = found[idf];
                        var p = curFoundItem.parentNode;
                        while(p){
                            delete af[p.id];
                            p = p.parentNode;
                        }
                    }
                }

                for(var id in af){
                    if(typeof id != "function"){
                        var n = af[id];
                        n.ui.hide();
                    }
                }

                //startNode.cascade(f2);

                if(this.remove){
                    for(var id in af){
                        if(typeof id != "function"){
                            var n = af[id];
                            if(n && n.parentNode){
                                n.parentNode.removeChild(n);
                            }
                        }
                    }
                }
            }
        }),

        listeners: {
            scope: this,
            beforequery: function(){
              return false;
            },
            keyup: {
                fn: function(field, key){
                    if(!this.isExpand)
                        this.expand();
                    var value = field.getRawValue();
                    if(Ext.isEmpty(value) && !Ext.isEmpty(field.treeFilter)){
                        field.treeFilter.clear();
                        return;
                    }
                    var re = new RegExp('' + value + '', 'i');
                    var tree = field.getTree();
                    tree.expandAll();
                    field.treeFilter.filter(re);
                },
                buffer: 250
            }
        }
    }

I hope that this will help you!