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 = "http://www.adobe.com/2006/mxml">
<! -- The following is a style -->
<Mx: Style>
Tree
{
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
[Bindable]
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>
<Node label = "Outbox">
<Node label = "Professional"/>
<Node label = "Personal"/>
</Node>
<Node label = "Spam"/>
<Node label = "Sent"/>
</Node>
</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>
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:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.