How to highlight a node In extJs 4.1 tree panel

Question

I have a ExtJs 4.1 tree panel. The tree is having multiple nodes. Now I allow user to perform contains search on tree node. So if I run the search on word ASP.NET, the search should highlight all the nodes who's text contains key word ASP.NET

How Can I do this?

Thank you

did you find my answer helpful, or does it not suit your needs? — John Hall

John Hall John Hall · Accepted Answer · 2013-08-26T16:46:52

You need to search for children from the TreePanel's root node, then use RegEx to test the value of the Node vs your search text.

Working Example

var store = Ext.create('Ext.data.TreeStore', {
    root: {
    expanded: true,
    children: [
        { text: "Javascript", leaf: true },
        { text: "ASP.net", leaf: true },
        { text: "Also ASP.net", leaf: true }
    ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Example Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    multiSelect: true,
    renderTo: Ext.getBody(),
    dockedItems: [{
    xtype: 'toolbar',
    dock : 'bottom',
    items : [{
        text: 'Search for ASP.net',
        handler: function(){
            var me = this,
                panel = me.up('panel'),
                rn    = panel.getRootNode(),
                regex = new RegExp("ASP.net");

            rn.findChildBy(function(child){
                var text = child.data.text;
                if(regex.test(text) === true){
                    panel.getSelectionModel().select(child, true);
                }
            });
        }
    }]
    }]
});

Working jsFiddle : http://jsfiddle.net/tdaXs/

TIP: Take note of the second parameter in the .select() method of the TreePanel's selectionModel. This is the optional keepExisting parameter, which must be set to true when manually selecting nodes. See the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select

Hope this helps!

How to highlight a node In extJs 4.1 tree panel

1 Answers