Ext.ux.tree.TreeFilterX

**demongloom** · 19 Feb 2009 7:08 AM

Hello, I have a problem with filtering after tree data reload.
When I doing filtering through user input, or firebug console it filter ok,
but when i tried to apply filtering after store reload, it's filter, but not correct for nodes with childs. In these nodes I getting all subnodes instead just filtered.

I have use code from remote tree example.

My code is:

Code:

/**
 * Trigger field for filter input, based on remote tree example
**/
o.navigation.filter_input = new Ext.form.TriggerField({
                     
             triggerClass: 'x-form-clear-trigger',
             width       : 300,
            
            onTriggerClick : function() {
                
                this.setValue('');
                o.navigation.filter.clear();
                
            },
            
            enableKeyEvents : true,
            listeners: {
                
                keyup : {
                    
                    buffer: 150, 
                    fn: function(field, e) {
                    
                        if(Ext.EventObject.ESC == e.getKey()) {
                            
                            field.onTriggerClick();
                            
                        } else {
                            
                            var val = this.getRawValue();
                            
                            // I've put try catch to avoid error on non-correct regexp entered by user
                            try {
                                
                                var re = new RegExp('.*' + val + '.*', 'i');
                                o.navigation.filter.clear();
                                 o.navigation.filter.filter(re, 'text'); 
                            
                            } catch(e) {}
                            
                        }
                        
                    }
                    
                }
                
            }
        });

/**
 * My navigation tree
 * It have stucture
 * +- Overrides
 * |  +- Nodes
 * +- Global
 *    +- Nodes
 *        +- Sub nodes
**/
o.navigation.tree = new Ext.tree.TreePanel({
            
            title       : "Navigation:",
            region      : "west",
            collapsible : false,
            split       : false,
            width       : 350,
            margins     : "3 0 3 3",
            border      : true,
            autoScroll  : true,
            animate     : false,
            editable    : false,
            enableDD    : false,
            rootVisible : false,
            useArrows   : false,
            lines       : true,
            
            columns:[
            {
                header    : 'Title',
                width     : 250,
                dataIndex : 'title'
            }
            ],
            
            root: {
                nodeType   : 'async',
                id         : 'root',
                text       : 'Root',
                expanded   : true,
                uiProvider : false
            },
            
            loader: new Ext.tree.TreeLoader({
                 
                 url             : '?_p=payments__order&_pa=get_navigation&_rt=text/json',
                 preloadChildren : true,
                 clearOnLoad     : true,
                 
                 listeners: {
                     
                     beforeload: function() {
                         
                        o.navigation.button_show.disable();
                        o.navigation.button_show.setText("Please choose item to display");
                         o.navigation.tree.getEl().mask("Loading...");
                         
                     },
                     
                     load: function() {
                         
                         o.navigation.tree.getEl().unmask();
                         
                     }
                     
                 }
                 
            }),
            
            tbar : [
                "Search:&nbsp;", 
                o.navigation.filter_input
            ],
            
            tools : [
                {
                    id      : "minus",
                    qtip    : "Collapse all",
                    handler : function() {
                        
                        var n = o.navigation.tree.getNodeById("G_1");
                        if(n) {    n.collapseChildNodes() };
                        
                    }
                },
                {
                    id      : "plus",
                    qtip    : "Expand all groups",
                    handler : function() {
                        
                        var n = o.navigation.tree.getNodeById("G_1");
                        if(n) {    n.expandChildNodes() };
                        
                    }
                },
                {
                    id      : "refresh",
                    qtip    : "Refresh data",
                    handler : function() {
                        
                        o.navigation.reload();
                        
                    }
                }
            ],
            
            listeners: {
                
                render: function() {
    
                    this.tbar2 = new Ext.Toolbar({
                        
                        renderTo: this.tbar,
                        items: [
                            o.navigation.button_show
                        ]
                        
                    });
                                    
                },
                
                click: function(node) {
                    
                    if( node.id == "OVERRIDES" ) {
                        return; }
                    
                    o.navigation.button_show.enable();
                    o.navigation.button_show.setText("Show '" + node.attributes.text + "'");
                    o.navigation.node = node;
                    
                },
                
                collapseNode: function(node) {
                                        
                    switch( node.attributes.etype ) {
                        
                    case "P":
                             
                        node.getUI().getIconEl()
                        .addClass("icon_e_profile")
                        .removeClass("icon_e_profile_");
                        
                         break;
                        
                    }                
                    
                },
                
                expandNode: function(node) {
                    
                    var render = function(node) {
                         
                        if( node.attributes.is_provider ) {
                            node.getUI().getTextEl().addClass("c_blue"); }
                        
                         if( !node.getUI().getIconEl() ) {
                             return; } 
                             
                         switch( node.attributes.etype ) {
                            
                        case "OVERRIDES":
                            node.getUI().getIconEl().addClass("icon_e_override");
                            break;
                         
                         case "G":
                             node.getUI().getIconEl().addClass("icon_e_global");
                             break;
                             
                         case "P":
                             
                            if( !node.isExpanded() ) {
                                 
                                 node.getUI().getIconEl()
                                 .addClass("icon_e_profile");
                            
                            } else {
                                
                                node.getUI().getIconEl()
                                .removeClass("icon_e_profile")
                                .addClass("icon_e_profile_");
                                
                            }    // if
                            
                             break;
                             
                         case "W":
                             node.getUI().getIconEl().addClass("icon_e_website");
                             break;
                         
                         }
                         
                         if( !node.isLeaf() && node.isLoaded() ) {
                             node.eachChild(render); }
                         
                     };
                                         
                     render(node);        
                    
                }
                
            }
            
        });

/**
 * Filtering object
**/
o.navigation.filter = new Ext.ux.tree.TreeFilterX(o.navigation.tree);

/**
 * My interface to reload whole tree and apply filter after reloading.
 * Same code as in filter_input onKeyUp.
 * Also i've tried to put this code into loader's listener->onload, but got same effect.
**/
o.navigation.reload = function() {
            
            o.navigation.tree.getLoader().load( o.navigation.tree.getRootNode(), function() {
                
                var flt = o.navigation.filter_input.getRawValue();
                    
                if( flt ) {
                    
                    try {
                        
                        var re = new RegExp('.*' + flt + '.*', 'i');
                        o.navigation.filter.clear();
                         o.navigation.filter.filter(re, 'text'); 
                    
                    } catch(e) { }
                    
                }    // if
                
            } );
            
        };

**jsakalos** · 19 Feb 2009 12:49 PM

TreeFilterX is good for fully loaded trees. If the filter at http://remotetree.extjs.eu/ has the functionality you would want but your code application doesn't work as expected then there must be a difference.

**demongloom** · 19 Feb 2009 1:36 PM

Ok, but why when tree is loaded filtering work correctly (mean user input) ? When i should execute my code, on which tree or loader event i should bind?

**jsakalos** · 19 Feb 2009 2:13 PM

You see, the tree filtering is just selective hiding of tree node UIs based on the attribute you want to search in and text or RegExp to search for. If the tree is not loaded there are no nodes, no nodes UIs to hide.

For more details see http://extjs.eu/docs/?class=Ext.ux.t...&member=filter and you can also read the code - it is a simple one.

**badgerd** · 22 Mar 2009 7:03 PM

Saki,

I am using your TreeFilterX plugin with http://extjs.com/forum/showthread.php?t=37704&page=3, and was wondering how I can make the "loading" mask work on it.

Apologies for the double post. This is really doing my head in and have been trying to get a solution working all day.

**jsakalos** · 22 Mar 2009 7:21 PM

TreeFilterX was made for fully loaded trees and it has no own UI; it's just filtering routine. Therefore, I'm afraid, you're on the wrong track. Or am I missing something?

**badgerd** · 22 Mar 2009 7:38 PM

Saki,

I have the tree loading asynchronously as each node is expanded.

I am using 3 Extensions to build my tree:

TreeCheckNodeUI - http://extjs.com/forum/showthread.php?t=27267 - So I can use checkboxes
TreePanelFilter - http://extjs.com/forum/showthread.php?t=37704

and your filter so that I can get parent nodes appearing while it is filtered.

While the filter is running I wish to have masking to let the user know that it is currently running and does not appear to be "frozen".

I could be asking the wrong person, and should probably be asking the author of the TreePanelFilter plugin?

**jsakalos** · 23 Mar 2009 1:41 AM

Now I understand; I thought you want to load while filtering and display load mask while loading.

Take a look at source of http://remotetree.extjs.eu, there you see:

Code:

        ,listeners:{
            keyup:{buffer:150, fn:function(field, e) {
                if(Ext.EventObject.ESC == e.getKey()) {
                    // show mask
                    field.onTriggerClick();
                    // hide mask
                }
                else {
                    var val = this.getRawValue();
                    var re = new RegExp('.*' + val + '.*', 'i');
                    // show mask
                    Example.tree.filter.clear();
                    Example.tree.filter.filter(re, 'text');
                    // hide mask
                }
            }}

You show and hide load mask at the bold points in your code.

**zhegwood** · 27 Mar 2009 9:54 AM

I have this up and running and working, but it seems there's a problem with the selectNext() function when the tree nodes are filtered.

It doesn't look like the selectNext() function accounts for hidden nodes in a tree and when you arrow down to a hidden node, the key listeners break and nothing is selected.

I've tried overriding the selectNext() function, but have had no luck so far. Just reporting this in case anyone else wants to take a shot at it.

**jsakalos** · 27 Mar 2009 10:19 AM

TreeFilter(X) does nothing else in addition to hiding non-matching nodes. selectNext could check if the next node is hidden or not and decide on the result.

Ext.ux.tree.TreeFilterX

Thread Tools

Search Thread

Display