Flex tree组件数据源、图标等修改_Flash教程-查字典教程网
Flex tree组件数据源、图标等修改
Flex tree组件数据源、图标等修改
发布时间:2016-12-28 来源:查字典编辑
摘要:更换Tree组件默认、打开、关闭、有子项等几个状态下的ico图标。复制代码代码如下:Tree{verticalScrollBarStyleN...

更换Tree组件默认、打开、关闭、有子项等几个状态下的ico图标。

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>

<>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<>

<mx:Style >

Tree

{

verticalScrollBarStyleName: treeVerticalScrollBar;

selectionColor: #417597;

/*为默认、打开、关闭、有子项等几个状态添加不同的ico*/

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[

//绑定数据,定义xml类型变量用于存放选中节点

[Bindable]

public var selectedNode:XML;

//当tree发生change事件时的事件

public function treeChanged(event:Event):void {

//将选中的节点转换成xml,赋予selectedNode,as为转换类型

selectedNode=Tree(event.target).selectedItem as XML;

}

//tree有3个事件使用较多,change、itemClick、itemOpen、itemClose

//change:选中列改变时被触发

//itemClick:点击某一列时触发

//itemOpen:节点展开时触发

//itemClose:节点关闭时触发

]]>

</mx:Script>

<>

<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">

<mx:Label width="100%" color="blue"

text="Select a node in the Tree control."/>

<mx:HDividedBox width="100%" height="100%">

<>

<>

<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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Flash教程学习
    热门Flash教程学习
    网页设计子分类