ExtJs 4 : Tree grid panel filter

Question

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 :

Ext.define('MyApp.view.MyViewport', {
    extend: 'MyApp.view.ui.MyViewport',

 initComponent: function() {

        var me = this;
        me.callParent(arguments);   
        me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me);

}, //end of initComponent

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);      
    }

});

nscrob : sure.. here's the console logs :: Single Product Packs MyViewport.js: sub store : centerTreeGridStore .. it doesn't go in the filterBy function. — Rashmi, Sep 10 '11 at 08:45
me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me); taking from this line me it's the container with the layout border ... but where exactly is this line called ? it should be in the initConfig of the component.. because it seems to me that centertreefilter is not called .. is console.log(selection.data.text); being showed? ? — nscrob, Sep 10 '11 at 09:11
I've editted and put up complete code for ref. console.log(rec) is not executted — Rashmi, Sep 10 '11 at 09:21

score 1 · Answer 1 · edited Oct 30 '14 at 20:49

After days of fighting with this issue, I was finally able to get the functionality, albeit in a not so satisfying way. Also, only leaf nodes are currently hidden.

filtering all nodes that don't mention "text":

t.getRootNode().cascadeBy(function(n){
    if (!n.hasChildNodes() && 
        n.raw && n.raw.text.toLowerCase().indexOf(text.toLowerCase()) < 0) {
        toRemove.push({ node: n, parent: n.parentNode });
    }
});

To restore later, run:

function restoreTrees() {
    for (var n in toRemove) {
        toRemove[n].parent.appendChild(toRemove[n].node);
    }
    toRemove = [];
}

There are many flaws with this solution. Including that the restored tree will probably have a different ordering for their nodes. But hey, at least this is some progress.

Would love to see a better one! (Had it working beautifully in Ext JS 3, but now these darn nodes don't have a .ui.hide() function any more).

score 0 · Answer 2 · edited Oct 30 '14 at 20:48

i've checked their example http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html, in fact the issue here is that the store for the treeGrid is a tree store which doesn;t have the method filterBy , the method filterBy is defined in ext.data.store and treeStore extends ext.data.abstractStore.. as i see it you have to apply your filters diferently, using the the filters config for the treeStore. You can define your filter and set the filterOnLoad on true and instead of calling the filterBy method do centerTreeGrid.store.fireEvent('load',selection). I hope this helps you

Edit I haven't used filters for tree stores but i think you can do something like this

var treeFilter = new Ext.util.Filter({
    filterFn: function(rec) {
    console.log(rec);
    return (rec.store("text") == selection.data.text);
});

And assign the filter to the treeStore in the initComponent

 centerGrid.store.filters.add(treeFilter);
 centerGrid.store.filterOnLoad = true;

And in the CenterTreeFilter function

 centerGrid.store.fireEvent('load',selection);

P.s the code is untested and probably it will need some modifications, but i think this is the way to do it.

I want to filter the centerTreeGrid on selection of items that are in the westTree. How to define filters for the same in extjs 4? — Rashmi, Sep 10 '11 at 10:12

ExtJs 4 : Tree grid panel filter

2 Answers2

Linked