PDA

View Full Version : TreeGRID panel filter



RashmiBhadsawle
9 Sep 2011, 10:55 PM
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 :



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

campersau1
10 Sep 2011, 5:39 AM
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:


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:



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.

RashmiBhadsawle
12 Sep 2011, 10:02 PM
@campersau1 (http://www.sencha.com/forum/member.php?78332-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?

campersau1
12 Sep 2011, 10:56 PM
Suggestion:


// 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

Strock
13 Sep 2011, 5:16 AM
ExtJS's appendChild() execution fails when code above calls root.copy(null, true);

campersau1
13 Sep 2011, 5:20 AM
Ahh damn yes...
Extjs has a bug copying nodes...

Here is the fix for it:
http://www.sencha.com/forum/showthread.php?134844-tree-node-copy(deep)-not-working-(4.0.1)

Then it should work.

Strock
13 Sep 2011, 10:43 PM
Thank you very much! Now the code works.

mberrie
13 Sep 2011, 10:56 PM
Then please mark the topic as 'answered'. Thank you.

RashmiBhadsawle
13 Sep 2011, 11:50 PM
@campersau1 (http://www.sencha.com/forum/member.php?78332-campersau1) : tree2.store.filterBy() won't work as TreePanel has Ext.data.TreeStore where as the filterBy is method of Ext.data.Store.

campersau1
14 Sep 2011, 12:05 AM
@RashmiBhadsawle (http://www.sencha.com/forum/member.php?255459-RashmiBhadsawle)

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

(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.

RashmiBhadsawle
14 Sep 2011, 12:34 AM
I tried the same as well as followed the fix for "append child" but I am getting error :Uncaught TypeError: Cannot read property 'length' of undefined

Strock
14 Sep 2011, 1:51 AM
This is the bug in the NodeInterface's copy method, that is fixed by the patch in this thread. Overriding this method won't work, you need to patch ExtJS's source.