Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: treestore filter (ext-4.0.7-gpl)

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    212
    Answers
    3

    Default Answered: treestore filter (ext-4.0.7-gpl)

    Hi,

    i want to add a searchfield to my treepanel. In my treepanel is a long list of names. i want to filter by this names. i found something like that:

    PHP Code:
    tbar : ['Filter:', {
            
    xtype 'trigger',
            
    anchor '-20',
            
    triggerClass 'x-form-clear-trigger',
            
    onTriggerClick : function() {
                
    this.setValue('');
                
    tree.store.filters.clear();
            },
            
    id 'filter',
            
    enableKeyEvents true,
            
    listeners : {
                
    keyup : {
                    
    buffer 150,
                    
    fn : function(fielde) {
                        if (
    Ext.EventObject.ESC == e.getKey()) {
                            
    field.onTriggerClick();
                        } else {
                            var 
    val this.getRawValue();
                            var 
    re = new RegExp('.*' val '.*''i');
                            
    console.log(tree);
                            
    console.log(val);
                            
    console.log(store.filters.filter);
                            
    store.filters.clear();
                            
    store.filters.filter(re'fullname');
                        }
                    }
                }
            }        
        }], 

    But nothing happens and no Error appears.

    Can you help me?

    Thx!

  2. I use this http://www.sencha.com/forum/showthre...941-TreeFilter

    and it works fine.


    complete code

    Code:
    treefilter = {
    
        searchTree: function(tree, searchfield) {
    
            if (tree && searchfield) {
    
                tree.collapseAll();
                //this call probably not needed
                this.setNodesVisible(tree, tree.getRootNode());
    
                if (searchfield.getRawValue().length > 1) {
                    this.searchTreeNode(tree, tree.getRootNode(), searchfield.getRawValue());
                }
            }
    
        },
    
        searchTreeNode: function(tree, node, query) {
    
            for (var i = 0; i < node.childNodes.length; i++) {
                this.searchTreeNode(tree, node.childNodes[i], query);
            }
    
            if (this.treeNodeMatch(node, query) == true) {
                tree.expandPath(node.getPath());
                
                this.setNodesVisible(tree, node);
            }
            else {
                if (node.isExpanded() == false) {
                    this.setNodeVisible(tree, node, false);
                }
            }
        },
        
        treeNodeMatch: function(node, query) {
            var re = new RegExp(query, "ig");
    
            if (re.test(node.data.text) == true) {
                return true;
            }
            else {
                return false;
            }
        },
    
        setNodesVisible: function(tree, node) {
    
            for (var i = 0; i < node.childNodes.length; i++) {
                this.setNodesVisible(tree, node.childNodes[i]);
            }
    
            this.setNodeVisible(tree, node, true);
    
        },
    
        setNodeVisible: function(tree, node, visible) {
    
            var record = tree.getStore().getNodeById(node.internalId);
            var viewNode = Ext.fly(tree.getView().getNode(record));        
    
            if (viewNode) {
    
                viewNode.setVisibilityMode(Ext.Element.DISPLAY);
                            
                if (visible == true) {
                    viewNode.show();
                }
                else {
                    viewNode.hide();
                }
            }
        }
    
    }

  3. #2
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153
    Answers
    33

    Default

    TreeStore filtering is not supported in 4.0.x. I'd advice you to request this feature in the feature request forum (I'd love that feature as well) .

  4. #3
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    I use this http://www.sencha.com/forum/showthre...941-TreeFilter

    and it works fine.


    complete code

    Code:
    treefilter = {
    
        searchTree: function(tree, searchfield) {
    
            if (tree && searchfield) {
    
                tree.collapseAll();
                //this call probably not needed
                this.setNodesVisible(tree, tree.getRootNode());
    
                if (searchfield.getRawValue().length > 1) {
                    this.searchTreeNode(tree, tree.getRootNode(), searchfield.getRawValue());
                }
            }
    
        },
    
        searchTreeNode: function(tree, node, query) {
    
            for (var i = 0; i < node.childNodes.length; i++) {
                this.searchTreeNode(tree, node.childNodes[i], query);
            }
    
            if (this.treeNodeMatch(node, query) == true) {
                tree.expandPath(node.getPath());
                
                this.setNodesVisible(tree, node);
            }
            else {
                if (node.isExpanded() == false) {
                    this.setNodeVisible(tree, node, false);
                }
            }
        },
        
        treeNodeMatch: function(node, query) {
            var re = new RegExp(query, "ig");
    
            if (re.test(node.data.text) == true) {
                return true;
            }
            else {
                return false;
            }
        },
    
        setNodesVisible: function(tree, node) {
    
            for (var i = 0; i < node.childNodes.length; i++) {
                this.setNodesVisible(tree, node.childNodes[i]);
            }
    
            this.setNodeVisible(tree, node, true);
    
        },
    
        setNodeVisible: function(tree, node, visible) {
    
            var record = tree.getStore().getNodeById(node.internalId);
            var viewNode = Ext.fly(tree.getView().getNode(record));        
    
            if (viewNode) {
    
                viewNode.setVisibilityMode(Ext.Element.DISPLAY);
                            
                if (visible == true) {
                    viewNode.show();
                }
                else {
                    viewNode.hide();
                }
            }
        }
    
    }

  5. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    212
    Answers
    3

    Default

    sounds great! and how do i implement this?

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    you make that treefilter available somewhere and call searchTree on it with params your treepanel and searchfield on the moment you want to filter the tree.

    searchfield is a component where you can extran a raw value from, but you can modify it that it work on a string.

  7. #6

    Default

    Hello,
    I have tried this but for some reason the line

    var viewNode = Ext.fly(tree.getView().getNode(record));

    in the setNodeVisible method is not returning anything for most of the records that are searched, even though I can find them when browsing the DOM.

    Any ideas??

  8. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Can you break it apart?

    Code:
    var record = tree.getStore().getNodeById(node.internalId);
    var sNode = tree.getView().getNode(record);
    var viewNode = Ext.fly(sNode);
    Wich var delivers undefined? If internalId is not set properly, the record can not be found.

  9. #8
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Here's what I ended up using so that all matching leaf nodes + parents would be displayed.

    Code:
    searchTree: function (tree, searchfield, property) {        // search if a tree component and searchfield (textfield, combo, trigger, etc) are passed as params
            if (tree && searchfield) {
                // property is optional - will be set to the 'text' propert of the treeStore record by default
                property = property || 'text'
    
    
                var matches = []                                            // array of nodes matching the search criteria
                var rn = tree.getRootNode()                                 // root node of the tree
    
    
                if (searchfield.getRawValue().length == 0) {                // if the search field is empty
                    tree.collapseAll();                                     // collapse the tree nodes
                    return;
                }
    
    
                tree.expandAll();                                           // expand all nodes for the the following iterative routines
    
    
                // iterate over all nodes in the tree in order to evalute them against the search criteria
                rn.cascadeBy(function (node) {
                    var re = new RegExp(searchfield.getRawValue(), "ig");   // the regExp could be modified to allow for case-sensitive, starts with, etc.
    
    
                    if (re.test(node.get(property)) == true && node.isLeaf()) {     // if the node matches the search criteria and is a leaf (could be modified to searh non-leaf nodes)
                        matches.push(node)                                  // add the node to the matches array
                    }
                })
    
    
                var visibleNodes = []                                       // array of nodes matching the search criteria + each parent non-leaf node up to root
                Ext.each(matches, function (item, i, arr) {                 // loop through all matching leaf nodes
                    rn.cascadeBy(function (node) {                          // find each parent node containing the node from the matches array
                        if (node.contains(item) == true) {                  
                            visibleNodes.push(node)                         // if it's an ancestor of the evaluated node add it to the visibleNodes array
                        }
                    })
                    visibleNodes.push(item)                                 // also add the evaluated node itself to the visibleNodes array
                })
    
    
                rn.cascadeBy(function (node) {                              // final loop to hide/show each node
                    var viewNode = Ext.fly(tree.getView().getNode(node));   // get the dom element assocaited with each node
    
    
                    if (viewNode) {                                         // the first one is undefined ? escape it with a conditional
                        viewNode.setVisibilityMode(Ext.Element.DISPLAY);    // set the visibility mode of the dom node to display (vs offsets)
                        if (Ext.Array.contains(visibleNodes, node)) {       // if the the dom node evaluated is contained in the visibleNodes array
                            viewNode.show()                                 // then hide show it
                        } else {
                            viewNode.hide()                                 // else, hide it
                        }
                    }
                })
            }
        }

  10. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    @slemmon. Nice! Does it work good?

  11. #10
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    I have it working in my app now. If I remember correctly I had to write something up for Ext 3, too, 'cuz the tree store filter would show just the first node it came to that matched and I needed all matching nodes to show.

    There's probably a more elegant way to write what I did, but it works.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •