Modify data sources and icons of the Flex tree component

Source: Internet
Author: User

Change the ico icon in the default, open, closed, and subitem statuses of the Tree component. Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<! -- Tree control example. -->
<Mx: Application xmlns: mx = "">
<! -- The following is a style -->
<Mx: Style>
VerticalScrollBarStyleName: treeVerticalScrollBar;
SelectionColor: #417597;
/* Add different ico states such as default, open, close, and subitem */
DefaultLeafIcon: Embed (source = "longstep/icon/sharp_grey/gif/base.gif ");
FolderOpenIcon: Embed (source = "longstep/icon/sharp_grey/gif/vote_yes.gif ");
FolderClosedIcon: Embed (source = "longstep/icon/sharp_grey/gif/options.gif ");
DisclosureOpenIcon: Embed (source = "longstep/icon/sharp_grey/gif/pause.gif ");
. TreeVerticalScrollBar
BorderColor: # f00;
</Mx: Style>
<Mx: Script>
<! [CDATA [
// Bind data and define xml variables to store selected nodes
Public var selectedNode: XML;
// Event when a change event occurs in the tree
Public function treeChanged (event: Event): void {
// Convert the selected node to xml and assign the selectedNode as the conversion type.
Selectednodeinclutree(event.tar get). selectedItem as XML;
// Tree has three events, change, itemClick, itemOpen, and itemClose.
// Change: triggered when the selected column changes
// ItemClick: triggered when a column is clicked
// ItemOpen: triggered when the node is expanded
// ItemClose: triggered when the node is closed
</Mx: Script>
<! -- XMLList is the most suitable for tree components as a data source -->
<Mx: XMLList id = "treeData">
<Node label = "Mail Box">
<Node label = "Inbox">
<Node label = "Marketing"/>
<Node label = "Product Management"/>
<Node label = "Personal"/>
<Node label = "Outbox">
<Node label = "Professional"/>
<Node label = "Personal"/>
<Node label = "Spam"/>
<Node label = "Sent"/>
</Mx: XMLList>
<Mx: Panel title = "Tree Control Example" height = "75%" width = "75%"
PaddingTop = "10" paddingLeft = "10" paddingRight = "10" paddingBottom = "10">
& Lt; mx: Label width = "100%" color = "blue"
Text = "Select a node in the Tree control."/>
<Mx: HDividedBox width = "100%" height = "100%">
<! -- @ Indicates the attribute of the xml intermediate vertex. For example, @ label indicates the value of the label attribute. -->
<! -- DataProvider = "{treeData}" indicates binding data. The data source can be XML or XMLList. -->
<Mx: Tree id = "myTree" width = "50%" height = "100%" labelField = "@ label"
ShowRoot = "false" dataProvider = "{treeData}" change = "treeChanged (event)"/>
<Mx: TextArea height = "100%" width = "50%"
Text = "Selected Item: {selectedNode. @ label}"/>
</Mx: HDividedBox>
</Mx: Panel>
</Mx: Application>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.