Change open and close icons on Flex Tree
Line Break
Author: Arjan (36 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.
Personally I don’t like the default open / close icons (the down arrow / right arrow icons ) on the Tree control in Flex. Luckily, can can easy change them into a different icon.
The Flex Tree has a number of properties you can style, what we are looking for here are the following two: disclosureOpenIcon and disclosureClosedIcon.
So lets declare a Tree and some XML data provider:
XML Data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <mx:XML xmlns="" id="xml"> <data> <node name="node1"> <node name="node2"> <leaf name="Leaf1"/> <leaf name="Leaf2"/> </node> </node> <node name="node3"> <leaf name="Leaf3"/> <leaf name="Leaf4"/> <leaf name="Leaf5"/> </node> <node name="node4"> <leaf name="Leaf6"/> </node> </data> </mx:XML> |
Tree control:
1 2 3 4 5 6 | <mx:Tree id="tree" dataProvider="{xml}" width="300" height="360" labelField="@name" showRoot="false"/> |
Ok, now we need to embed the icons we are going to use instead of the default arrow icons:
In your script section add the following (assuming that you have an assets folder with the two icon files in them:
1 2 3 4 5 | [Embed(source="assets/plus.gif")] public var plus:Class; [Embed(source="assets/minus.gif")] public var minus:Class; |
Ok, now all we need to do is to set the disclosureOpenIcon and disclosureClosedIcon styles, lets create an method that’s called on the initialize event that does this:
1 2 3 4 5 | private function init():void { tree.setStyle("disclosureOpenIcon", minus); tree.setStyle("disclosureClosedIcon", plus); } |
That’s all, take a look at the sample application below to see the result (use right-mouse->view source to see the complete source code):
Related posts:
- Remove Folder and File icons from Flex Tree
- Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
- Style Flex Tree Label Example
- Drag and Drop from DataGrid or AdvancedDataGrid to Tree
- Tree in Advanced DataGrid Example
Written by · Filed Under Examples
Was this post useful to you?
(3 votes, average: 4.67 out of 5)
Loading ...Comments
3 Responses to “Change open and close icons on Flex Tree”
Is it possible to the header text works as a link to expand the node?
In this example, only the tree expands when we clik on the minus and plus icon. I wanna clik en the header (node1… node6) and expand the tree.
Is it possible?
Thanks
Hi Alison,
Yeah that’s possible. Just add an event listener to your Tree component on the click event:
click=”handleClick(event)”
And add the following function to your script:
private function handleClick(event:MouseEvent):void
{
tree.expandItem( tree.selectedItem, !tree.isItemOpen( tree.selectedItem ) );
}
This will open the clicked item if it’s closed and close it if it’s open.
Good luck!
Arjan
Hi Arjan.
Thank you. Works perfectly!