主要实现的功能：
1.改掉默认的箭头，及其它的皮肤，这个可以在tree的属性里设置。
2.改掉的图标在文字右边的显示；
3.默认的所有的节点都展开。
4.所有目录节点加背景色；
效果如下：
折叠的图标效果：
源码如下：
MyTreeItemOpenRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="onCreationComplete()" dataChange="updateDisplay()">
<mx:states>
<mx:State name="group">
<mx:AddChild>
<mx:HBox width="100%" backgroundColor="#E0F2F8">
<mx:Image id="foIcon" mouseDown="disclosureMouseDownHandler(event)"/>
<mx:Label id="groupName" />
<mx:HBox width="100%" />
<mx:Image id="disclosureIcon" mouseDown="disclosureMouseDownHandler(event)"/>
</mx:HBox>
</mx:AddChild>
</mx:State>
<mx:State name="contact">
<mx:AddChild>
<mx:Image id="contactIcon" />
</mx:AddChild>
<mx:AddChild>
<mx:HBox>
<mx:Image id="defaultLeaf" source="{defaultLeafIcon}"/><mx:Label id="contactName" />
</mx:HBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Style>
TreeListData
{
/*disclosureIcon:"disclosureOpenIcon"*/
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Tree;
import mx.controls.listClasses.BaseListData;
import mx.controls.treeClasses.TreeListData;
import mx.core.IFlexDisplayObject;
import mx.core.SpriteAsset;
import mx.core.mx_internal;
import mx.events.TreeEvent;
use namespace mx_internal;
[Bindable]
[Embed(source="assets/images/tree/elbow-end-minus-nl.gif")]
public var disclosureOpenIcon:Class;
[Bindable]
[Embed(source="assets/images/tree/leaf.gif")]
public var defaultLeafIcon:Class;
[Bindable]
[Embed(source="assets/images/tree/elbow-end-plus.gif")]
public var disclosureClosedIcon:Class;
private var _listData:TreeListData;
private var listOwner:Tree;
public function get listData():BaseListData
{
return _listData;
}
[Bindable]
public function set listData(value:BaseListData):void
{
_listData=TreeListData(value);
listOwner=Tree(_listData.owner);
}
private function disclosureMouseDownHandler(event:Event):void
{
event.stopPropagation();
if (listOwner.isOpening || !listOwner.enabled) return;
var open:Boolean=_listData.open;
_listData.open=!open;
listOwner.dispatchTreeEvent(TreeEvent.ITEM_OPENING,_listData.item,//item
this,//renderer
event,//trigger
!open,//opening
true,//animate
true)
}
private function onCreationComplete():void
{
//初始化完成后进行渲染
updateDisplay();
}
//渲染，如果是第一次创建则通过onCreationComplete方法调用，如果是从缓存中取出的则直接调用
private function updateDisplay():void
{
//只有具有条目数据并且初始化完成后才允许渲染
if (!(_listData && initialized)) return;
if (_listData.hasChildren)
{
currentState="group";
//setStyle("folderClosedIcon",null);
//setStyle("paddingLeft",16);
//setStyle("paddingRight",16);
if(disclosureIcon && disclosureIcon.source!=_listData.disclosureIcon)
{
//disclosureIcon.source=_listData.disclosureIcon;
if (_listData.open) {
disclosureIcon.source=disclosureOpenIcon;
} else {
disclosureIcon.source=disclosureClosedIcon;
}
}
if(groupName && groupName.text!=_listData.label)
{
groupName.text=_listData.label;
}
}
else if (!_listData.hasChildren)
{
currentState="contact";
setStyle("paddingLeft",_listData.indent);
/*if(contactIcon && contactIcon.source!=_listData.item.@head)
{
contactIcon.source=_listData.item.@head;
}*/
if(contactName && contactName.text!=_listData.label)
{
contactName.text=_listData.label
}
}
}
]]>
</mx:Script>
</mx:HBox>
测试文件源码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import com.gwtjs.renderer.tree.MyTreeItemRenderer;
import mx.controls.Alert;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;
private function showDataInfo(event:ListEvent):void
{
baseText.text="selectIndex="+myTree.selectedIndex;
baseText.text+="nselectedItem="+myTree.selectedItem.toXMLString();
var data:TreeListData=MyTreeItemRenderer(event.itemRenderer).listData as TreeListData;
dataText.text="depth="+data.depth+"n";
dataText.text+="hasChildren="+data.hasChildren+"n";
dataText.text+="open="+data.open+"n";
dataText.text+="icon="+data.icon+"n";
dataText.text+="disclosureIcon="+data.disclosureIcon+"n";
dataText.text+="indent="+data.indent+"n";
dataText.text+="item="+data.item;
}
[Bindable]
private var menus:XML;
private function openAllNodes():void {
myTree2.openItems = menus..node;
}
private function closeAllNodes():void {
myTree2.openItems = [];
}
private function LoadMenu(event:ResultEvent):void{
menus = XML(event.result);
var results:XMLList = menus.node;
myTree2.dataProvider = results;
openAllNodes();
}
protected function creationCompleteHandler(event:FlexEvent):void
{
menu.send();
}
]]>
</mx:Script>
<mx:HTTPService url="assets/data/TreeMenus.xml" id="menu" useProxy="false"
showBusyCursor="true" result="LoadMenu(event)" resultFormat="xml"/>
<mx:XMLListCollection id="treeData">
<mx:XMLList xmlns="">
<group name="我的好友" isBranch="true">
<node name="王小建" head="defaultMan.png" sign="求存养息"/>
<node name="何东平" head="defaultWoman.png" sign="幸运到底有多重要"/>
</group>
<group name="陌生人" isBranch="true">
<node name="江北风" head="defaultHead.png" sign="这是流亡的场所"/>
<node name="宋小雨" head="defaultHead.png" sign="诚信方能立身"/>
</group>
<group name="黑名单" isBranch="true">
<node name="XX**XX" head="defaultHead.png" sign="冬天来了"/>
<node name="广告宣传" head="defaultHead.png" sign="www.ttq.com"/>
</group>
</mx:XMLList>
</mx:XMLListCollection>
<mx:Tree id="myTree" dataProvider="{treeData}" labelField="@name"
width="249" x="445" y="48" height="285" itemRenderer="com.gwtjs.renderer.tree.MyTreeItemRenderer" variableRowHeight="true"/>
<mx:Tree id="myTree2" labelField="@label"
width="249" x="445" y="248" height="285" itemRenderer="com.gwtjs.renderer.tree.MyTreeItemOpenRenderer" variableRowHeight="true"/>
<mx:Panel title="ListBase" x="143" y="48" width="294" height="91">
<mx:TextArea id="baseText" width="100%" height="100%" />
</mx:Panel>
<mx:Panel title="TreeDataList" x="143" y="147" width="294" height="186">
<mx:TextArea id="dataText" width="100%" height="100%" />
</mx:Panel>
</mx:Application>
