PDA

View Full Version : [ExtJS 4.0.7;Tree] Apply custom styles to node icons



Werzi2001
22 Dec 2011, 12:54 AM
Hi,

i am using ExtJS 4.0.7 and would like to add custom styles to the node icons.

I know that there exists the config "iconCls" but this is not enough for me as every node can have a different color and i dont want to create about 16 million classes to have a class for every possible value.

Is there a way to apply custom css styles to the node icons?

Yours
Thomas

mitchellsimoens
22 Dec 2011, 8:55 AM
Please post in the appropriate forum. I have moved this to the Ext JS 4 Q&A forum.

slemmon
22 Dec 2011, 1:03 PM
You can use Ext.data.NodeInterface's iconCls or icon property.
I use iconCls generally since not all components that use icons work with the icon property, but will with iconCls.

Werzi2001
23 Dec 2011, 12:34 AM
Hi,

thanks for your reply but as i stated in the original post i cannot use iconCls or icon configs. The color of every node may be different (user chosen). So i would have to create more than 16 million css classes to have a class for every color.

What i would need is a possibility to apply css styles (background color) directly to the node icon element.

Yours
Thomas

slemmon
23 Dec 2011, 1:04 AM
I see. What about adding a cls property per node unique to each node. The class could be defined later as the user selects the color for the node. Then you'dd add that class/color to style tags using the Ext.util.CSS class.

Werzi2001
23 Dec 2011, 4:46 AM
Thanks for your hint using Ext.util.CSS. I think this could work for me. But actually i would prefer a solution which allows me to set style attributes on the icon over creating dozens of css classes.

tvanzoelen
23 Dec 2011, 5:57 AM
I do not know what you exactly want. But it is possible to get the element of the node and set styles on it. Probably you can do it on the load event of the TreeStore or when a color is picked.



var viewNode = Ext.fly(tree.getView().getNode(record));


viewNode is an Element and has the applyStyles( String/Object/Function styles ) method

Werzi2001
31 Dec 2011, 4:22 AM
Thanks for your reply but i didn't manage to get code according to your solution. I tried the following events from the tree panel/view: load, itemadd, itemexpand, iteminsert. But with none of these events i was able to get a working solution.

I had the following problems:
- getNode doesnt work using a object of NodeInterface
- load didnt give me an array of records but just one record (the expanded one?)
- on every expand/collapse ExtJS removes my set styles

Do you have any hint to help me? Thanks a lot!

Edit:
As it seems getNode works with NodeInterface but the nodes are added after itemexpand is fired for the expanded node. So i cannot set the styles as the nodes dont exist yet.

Edit2:
Now i have a solution that works for me. But does it really have to be that compilcated?

tree.on('itemexpand', function(node, eopts) {
var color = node.data.color;
var el = tree.getView().getNode(node);
if (el && color.length > 0) {
Ext.fly(el).select('.x-tree-icon').each(function(el, c, idx) {
el.setStyle('background-color', '#' + color);
});
}
});
tree.on('itemcollapse', function(node, eopts) {
var color = node.data.color;
var el = tree.getView().getNode(node);
if (el && color.length > 0) {
Ext.fly(el).select('.x-tree-icon').each(function(el, c, idx) {
el.setStyle('background-color', '#' + color);
});
}
});
tree.getView().on('itemadd', function(records, index, nodes, eopts) {
for (var i=0;i<records.length;i++) {
var color = records[i].get('color');
if (color.length > 0) {
Ext.fly(tree.getView().getNode(records[i])).select('.x-tree-icon').each(function(el, c, idx) {
el.setStyle('background-color', '#' + color);
});
}
}
});
tree.getView().on('refresh', function(view, eopts) {
var nodes = view.getNodes();
for (var i=0;i<nodes.length;i++) {
var record = view.getRecord(nodes[i]);
var color = record.get('color');
if (color.length > 0) {
Ext.fly(nodes[i]).select('.x-tree-icon').each(function(el, c, idx) {
el.setStyle('background-color', '#' + color);
});
}
}
});
Please tell me that this is possible easier :(

Edit3:
I now solved it by using a custom renderer and hiding the default icon completely.