Style Flex Tree Label Example
Line Break
Author: Arjan (34 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
One of the more complicated controls to work with in Flex is, in my humble opinion, the Tree. Ok, for displaying a simple hierarchy it’s simple and works just fine. But if you want to do some more complicated stuff with it, things get a bit tricky and some extra coding is necessary. For example, what if you want to style your labels in the Tree based on the type of XML node in your source XML?
Once you know the answer, it’s not all that complicated anymore. You just have to implement a custom itemRenderer that does what you want with the Tree items. In my example, I implemented a custom itemRenderer called TreeItemDataDependantLabelRenderer that extends the TreeItemRenderer class. Since I am interested in showing something different based on the type of XML node, I had to override the protected function updateDisplayList.
In the custom updateDisplayList I first call the method of the generic super class, followed by some additional logic to facilitate custom display styles for different types of nodes ( in my case I have three types of nodes: company, department & employee ). View the sample application to see the result. Use right mouse click -> view source to see the complete source.
Related posts:
- Change open and close icons on Flex Tree
- Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
- Tree in Advanced DataGrid Example
- Drag and Drop from DataGrid or AdvancedDataGrid to Tree
- Remove Folder and File icons from Flex Tree
Written by · Filed Under Examples
Was this post useful to you?
(5 votes, average: 3.40 out of 5)
Loading ...
