dynamically changing node renderering in tree

Question

When I call itemClick() in an Ext.tree.Panel I would like to render some arbitrary nodes.

Lets say, when I click on a node I want to highlight all of its children yellow :

enter image description here

simples.

I know how to render the clicked node. That's easy :

itemclick: function(dv, record, item, index, e) {

    //HTMLElement
    item.style.color="RED";

Item is just a HTMLElement which can get its style changed.

I also managed to figure out that I can also access data from the store like so :

itemclick: function(dv, record, item, index, e) {

    //View --> store
    dv.store.data.items[4]

The data items are just the Ext.data.Model objects i think. I can't see any hook where I can add styling to the item objects however :(

I also looked at doing an 'up' query and calling findChild(..) on tree panel:

itemclick: function(dv, record, item, index, e) {


    //Ext.data.NodeInterface
    var panel = dv.up('panel');
    var rn = panel.getRootNode();

    var r = rn.findChild("name", "MYNODE");

    r.data.cls = 'my_class';

There is a cls 'hook' where I can set class values. However the rendering does not seem to happen. Also the findChild method only returns one value, and there is no findChildren (which is really perplexing. Why would ExtJS ommit something like that? )

This event callback method really puzzles me. I somehow need a link between the HTMLElement and the data items or store. All these approaches seem to lead to a dead end for me.

UPDATE : In the third example I can call panel.getView().refresh(); and this will update the UI. So now the only problem I have is finding a method like getChildren(..)

Oliver Watkins Oliver Watkins · Accepted Answer · 2014-12-01T15:25:20

I solved my problem by first getting my panel and then root node. Then on my root node I called the eachChild() function.

I needed to pass in an a recursive function. This recursive function looked for nodes I'm interested in (using searchTerm), and then it could set a cls value. At the end I run panel.getView().refresh(), and it all works splendidly.

itemclick: function (dv, record, item, index, e) {



    var panel = dv.up('panel');
    var rn = panel.getRootNode();

    var traverseTree = function (c) {

        if (c.data.name == traverseTree.searchTerm) {
            c.data.cls = 'myClass';
        }else {
            c.data.cls = '';
        }

        if (c.childNodes.length > 0) {

            for (var i = 0; i < c.childNodes.length; i++) {

                var node = c.childNodes[i];

                traverseTree(node)
            }
        }
    };

    traverseTree.searchTerm = "StringToMatch";
    rn.eachChild(traverseTree, rn);
    panel.getView().refresh();

dynamically changing node renderering in tree

2 Answers