1. #31
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    30
    Vote Rating
    3
    demongloom is on a distinguished road

      0  

    Default


    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: ", 
                    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
                    
                } );
                
            };

  2. #32
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,563
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #33
    Sencha User demongloom's Avatar
    Join Date
    Apr 2008
    Location
    Israel
    Posts
    30
    Vote Rating
    3
    demongloom is on a distinguished road

      0  

    Default


    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?

  4. #34
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,563
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #35
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    178
    Vote Rating
    0
    badgerd is on a distinguished road

      0  

    Default


    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.

  6. #36
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,563
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #37
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    178
    Vote Rating
    0
    badgerd is on a distinguished road

      0  

    Default


    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?

  8. #38
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,563
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #39
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    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.

  10. #40
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,563
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM