Search inside extjs tree store

Question

I have a textfield in my tree toolbar that should take a string from a user then search that through a specific column of tree. I use store filter but there is a problem in my code and I dont know what it is. thanks for help. This is my code:

var onSimpleSearch = function(){
 var searchStr= Ext.getCmp('searchField').getValue();
   if(searchStr){
    var tree = Ext.getCmp('infra_tree');
    var tstore = tree.getStore();
    var searchReg = new RegExp(".*" + searchStr + ".*", "ig");
    console.log(searchReg); //return RegExp!!!!!!!
    tstore.filter("ipadd", searchReg});
}else {
    Ext.MessageBox.show({
        title: 'Nothing to search',
        msg: 'Search string is empty',
        icon : 'ext-mb-info',
        buttons: Ext.MessageBox.OK
    });
  }
};

debug it. if you replace searchReg in the filter() call with a hard coded value, does it work? — Amol Katdare, Oct 08 '11 at 14:40
I did, It doesnt, I think there is no implementing for tree store filter, it is fake! what should i do now? how to filter my data in store? :( — Matt Stone, Oct 09 '11 at 06:16
This thread shows some more background, but not yet a working implementation: http://www.sencha.com/forum/showthread.php?43909-Search-Operation-in-tree-control — Tim, Jun 20 '12 at 14:32

score 3 · Answer 1 · edited May 23 '17 at 12:05

There is no filter method in Ext.data.TreeStore (assuming you are using 4.x, I am using 4.1.3). Maybe this will help you: Ext JS 4: Filtering a TreeStore

Alternatively, you could try something like this:


var nodeToSearchFor = treestore.getRootNode().findChildBy(function(node) {
    return (node.data['fieldToSearchFor'] == valueToSearchFor);
});

And hopefully one last edit :-) In this thread in the Sencha forums, they are suggesting you use CascadeBy on the root node. Works same way as the code above more or less.

http://www.sencha.com/forum/showthread.php?150060-Search-inside-extjs-tree-store

score 0 · Answer 2 · answered Jun 30 '13 at 12:10

You could walk over all child nodes in the tree instead of going through the store. All nodes of the tree implement the TreeNodeInterface which has the methods you need. The cascadeBy method is probably what you are looking for. It will call a function recursively on each child node of a node. That is essentially the same as a filter for a store, but it knows about the hierarchy of the tree.

var searchStr = Ext.getCmp('searchField').getValue();
var matchingNodes = [];

var tree = Ext.getCmp('infra_tree'); 
// You could get the selected node, or any other node as start node.
// I take the root node as example.
var startNode = tree.getRootNode();

startNode.cascadeBy(function (childNode) {
    if (childNode.get('text') == searchStr)
    {
       matchingNodes.push(childNode);
    }
}, this);

You could search any other field in childNode as well obviously. Usually I the nodes I keep in trees have a different model in them. If I have a teacher model that is displayed in a tree I have a teacherTreeModel that has a teacher. So the teacher tree model is not saved in database, only the teacher model. Found that to be easier in many cases.

score 0 · Answer 3 · answered Jan 15 '19 at 18:03

I had the same questions and I just found a fiddle that solves the "search in a tree store" problem. I don't know who wrote it, but it's a gem. It is running here: https - add colon slash slash - fiddle.sencha.com/#fiddle/ra&view/editor (I tried to include the source code from the fiddle here into the answer, but the Stack Overflow editor doesn't allow me.)

Search inside extjs tree store

3 Answers3