CODEWITHSUNDEEP
extjsextjs4
Oliver Watkins
Oliver Watkins

Reputation: 13509

How do I dynamically add custom rendering to a tree node in extjs tree?

I would like to dynamically add some custom rendering to a node in a tree when I select it (perhaps a border, with maybe some color changes).

I tried this :

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

   item.renderer = function(value, record){
      return Ext.String.format('<div class="tree-font">{0}</div>', value);
   }
}

But it doesn't seem to work.

I would also like the renderer to be additive (or chained). I have rendering on the nodes already like icons, so the new renderer should just complement with the other. Not sure if extjs can do this?

Upvotes: 0

Views: 1547

Answers (2)

Amit Chauhan
Amit Chauhan

Reputation: 232

why don't you achieve this with the help of css, when we select a row, Extjs adds 'x-grid-row-selected' to the tr.

css :

.x-grid-row-selected .x-grid-cell-inner {
    background: gray !important
}

If your grid has selection model as cellmodel then you can use css to do what you wish:

.x-grid-cell-selected .x-grid-cell-inner {
    bacground: red !important
}

Upvotes: 1

Chandru
Chandru

Reputation: 1014

Try this

listeners: {
    itemclick: function(dv, record, item, index, e) {
        item.style.color="RED"; 
        //or use classList
        item.classList.add("tree-font");
    }
}

Upvotes: 1

Related Questions