Flex4.6创建Tree

图片路径配置写法:

[Bindable][Embed(source="assets/icon/person.png")]public var imgPath:Class;

这样写了下面才好使用, 一定要写public方法, 如果写private方法它会找不到图片.会报错.

树控件的申明:

<mx:Canvas right="0" bottom="100" height="90%" width="25%" borderColor="red" borderStyle="solid"><mx:Tree id="tree"  height="90%" width="90%" showRoot="false" dataProvider="treeData"//绑定数据源 labelField="@label"//显示文字. iconField="@img" />//显示图片.</mx:Canvas>

显示文字, 显示图片那里的@lable, @img 是在下面Node节点里配置的属性, 可以随意修改. 绑定数据源那点写的是下面XMLlist的ID.

数据源的申明:

<fx:Declarations>  <fx:XMLList id="treeData">    <node label="好友">    <node label="无极剑圣" img="imgPath"/>    <node label="流浪法师" img="imgPath"/>    </node><node label="陌生人"><node label="德玛西亚" img="imgPath"/><node label="光辉女郎" img="imgPath"/>    </node>    </fx:XMLList>    </fx:Declarations>

如果没有Node节点没有配置Img属性. 那他就会显示默认的文件夹图片. 所以还是自己配上一个.

下面我们用字符串(String)来生成一个Tree列表:

图片配置和上面一样, 就不贴出代码了.

树控件申明代码:

<mx:Canvas right="0" bottom="100" height="90%" width="25%" borderColor="red" borderStyle="solid"><mx:Tree id="tree"  height="90%" width="90%" showRoot="false" labelField="@label"//显示文字. iconField="@img" />//显示图片.</mx:Canvas>

没有了上面的数据源绑定ID的代码.

数据源获取代码:

protected function addNode(event:MouseEvent):void {//XML的字符串var xmlStr:String = "<nodes><node label=\"好友\"><node label=\"无极剑圣\" img=\"imgPath\"/><node label=\"流浪法师\" img=\"imgPath\"/></node><node label=\"陌生人\"><node label=\"德玛西亚\" img=\"imgPath\"/><node label=\"光辉女郎\" img=\"imgPath\"/></node></nodes>";//把字符串转成XML.var xml:XML = new XML(xmlStr);//把XML转成XMLList. 也就是多个XML.获取根节点下的所有子节点.var xmlList:XMLList = xml.elements("node");//转换成Tree需要的那种类型.var collection:XMLListCollection = new XMLListCollection(xmlList);//设置到Treetree.dataProvider = collection;}

此代码写在一个按钮的单击事件里面.  这里的字符串是:

<nodes><node label="好友"><node label="无极剑圣" img="imgPath"/><node label="流浪法师" img="imgPath"/></node><node label="陌生人"><node label="德玛西亚" img="imgPath"/><node label="光辉女郎" img="imgPath"/></node></nodes>

因为要转成XML.所以必须要加一个更节点.