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

Thread: TreeGRID panel filter

  1. #1

    Default TreeGRID panel filter

    Hi,
    I am using ExtJs 4 with a Tree panel on west region and TreeGrid panel on center region. Is there any way to filter the TreeGrid panel(center region) on selection of the treepanel(west) ??


    I tried the following but no luck :


    Code:
          me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me);
    
    
    	CenterTreeFilter: function(){
            var selection = this.down('#westTreePanel').getView().getSelectionModel().getSelection()[0];
            var centerTreeGrid = this.down('#centerTreeGrid');
            console.log(selection.data.text);
           centerTreeGrid.store.filterBy(function(rec, id){
                 console.log(rec);
                 return (rec.store("text") == selection.data.text);
            });       
            console.log("sub store : " + this.down('#centerTreeGrid').getStore().storeId);      
        }

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Answers
    8

    Default

    Hi, I was looking for such a feature, too. But all I have found was that the TreeStore internally uses a Ext.data.Tree to store the data. This class (Ext.data.Tree) has a filter function:
    Code:
        filter: function(filters, recursive) {
            this.getRootNode().filter(filters, recursive);
        }
    But the root node - which is a NodeInterface - has no filter method...

    At the moment I am using my own TreeStore to do the filtering.

    Here is the code:

    Code:
    Ext.define("MyTreeStore", {
      extend : "Ext.data.TreeStore",
    
      /**
       * Filters the current tree by a function fn
       * if the function returns true the node will be in the filtered tree
       * a filtered tree has also a flat structure without folders
       */
      filterBy : function(fn, scope) {
        var me    = this,
            nodes = [],
            root  = me.getRootNode(),
            tmp;
    
    
        // the snapshot holds a copy of the current unfiltered tree
        me.snapshot = me.snapshot || root.copy(null, true);
    
    
        tmp = me.snapshot.copy(null, true);
        tmp.cascadeBy(function(node) {
          if (fn.call(scope || me, node)) {
            node.childNodes = []; // flat structure but with folder icon
            nodes.push(node);
          }
        });
        delete tmp;
    
    
        root.removeAll();
        root.appendChild(nodes);
    
    
        return me;
      },
    
    
      /**
       * Clears all filters a shows the unfiltered tree
       */
      clearFilter : function() {
        var me = this;
    
    
        if (me.isFiltered()) {
          me.setRootNode(me.snapshot);
          delete me.snapshot;
        }
    
    
        return me;
      },
    
    
      /**
       * Returns true if the tree is filtered
       */
      isFiltered : function() {
        return !!this.snapshot;
      }
    
    });
    maybe this helps you, too.
    If you filter the tree it will be flat but the folder icons should show up.

  3. #3

    Default

    @campersau1 : Thanks for your reply.. I am trying to filter 2nd tree-grid Panel on selection of the record of 1st Tree. ( like for e.g Windows Explorer ). But no luck as of now.. any suggestions?

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Answers
    8

    Default

    Suggestion:
    Code:
    // create the tree store I have posted previously
    var store1 = Ext.create("MyTreeStore", {
        // ...
    });
    
    
    
    
    var tree1 = Ext.create("Ext.tree.Panel", {
        // ....
        store : store1,
        listeners : {
            select : function(tree, rec) {
                // filter the second tree
                tree2.store.filterBy(function(node) {
                    // rec == the node from tree1
                    // node == the node from tree2
                    if (rec.get("field") == node.get("field")) {
                        return true;
                    }
                });
            }
        }
    });
    
    
    // create the tree store I have posted previously
    var store2 = Ext.create("MyTreeStore", {
        // ...
    });
    
    
    var tree2 = Ext.create("Ext.tree.Panel", {
        // ....
        store : store2
    });
    I hope this helps

  5. #5
    Sencha User
    Join Date
    Jun 2007
    Posts
    7

    Default

    ExtJS's appendChild() execution fails when code above calls root.copy(null, true);

  6. #6
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Answers
    8

    Default

    Ahh damn yes...
    Extjs has a bug copying nodes...

    Here is the fix for it:
    http://www.sencha.com/forum/showthre...working-(4.0.1)

    Then it should work.

  7. #7
    Sencha User
    Join Date
    Jun 2007
    Posts
    7

    Default

    Thank you very much! Now the code works.

  8. #8
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26

    Default

    Then please mark the topic as 'answered'. Thank you.

  9. #9

    Default

    @campersau1 : tree2.store.filterBy() won't work as TreePanel has Ext.data.TreeStore where as the filterBy is method of Ext.data.Store.

  10. #10
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Answers
    8

    Default

    @RashmiBhadsawle

    Take a look at my second post: http://www.sencha.com/forum/showthread.php?146694-TreeGRID-panel-filter&p=647213&viewfull=1#post647213

    I'm extending the Ext.data.TreeStore to add the filterBy, isFiltered, and clearFilter method.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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