How to change the Tree Grid icon dynamically

Is it possible to change the Tree Grid icon dynamically, when opening and closing the parent node? One solution we found was to use CSS to switch the icon in expanded mode from the default.

For example, if you use the following CSS, you’ll be able to change the Tree Grid icon for a node with the icon setting “fx-icon application-view-detail” to “fx-icon star” by changing the background position of the icon map when the tree node is expanded:

.x-grid-tree-node-expanded .x-tree-icon.fx-icon.application-view-detail {
background-position: -252px -450px !important;

Note: The list with all the available FOEX icons and their respective CSS classes can be found here.


If you’re looking to change an icon dynamically in the FOEX Tree Node when clicking on it, then the following javascript snippet can be used within the event handlers:'iconCls', 'fx-icon star');

This is thanks to the inbuilt bindings of Ext JS that automatically update the UI when the data changes within the actual tree record.

Before using the above suggestions, please note that we do not support you writing custom javascript code, therefore it is your responsibility to maintain it and we do not guarantee compatibility when upgrading Ext JS.


To read the documentation reference for the event parameters click here and go to FOEX Documentation -> Region Plugins -> Tree grid -> Plugin Events -> Node Click/Select.


Looking to build large-scale web applications fast? Sign up and start developing with FOEX!

Categories FOEX Grid
Add your comment

Your email address will not be published. Required fields are marked *