溶剂'blog

基本使用方法 你只要给个如下格式的XML给Tree组件就可以了


<node>
<node label="Mail">
<node label="INBOX" />
<目录 label="Personal Folder" 图标="icon1">
<网址 label="我的网站" url=http://flash.2ego.com />
<node label="Demo" isBranch="true" />
<node label="Personal" isBranch="true" />
<node label="Saved Mail" isBranch="true" />
<node label="bar" isBranch="true" />
</node>
<node label="Sent" isBranch="true" />
<node label="Trash"/>
</node>
</node>

这个XML文件 可以自由发挥 任意添加属性 和节点 甚至节点名称都不必是node 但是label是必须的。

我们开始扩展他的功能：

1 修改显示图标

两个方法：一是直接修改他的主题 这方法简单没什么好说的。

二是用“iconFunction”看过番茄的“给List添加图示”的人都应该知道如何使用了

首先制作几个图标可以是MC或者是图元 尺寸不要太大了,16*16 就太够了 一定要记将他们导出

然后是脚本：

//图标回调函数
tree.iconFunction=function(a){
//根据节点的属性返回不同的ICON
if(a.attributes.icon!=undefined){
return a.attributes.icon;
}else if(a.attributes.url!=undefined){
return "icon_ie";
}else if(a.nodeName=="node"){
return "icon_folder";
}
}

这代码简单 就是根据不同情况返回不同的图标。

2修改节点打开事件

大家一定发现了 我们要点击没个节点左边的那个图标 才可以打开或关闭该节点 很麻烦。

方法很简单：

onchange = function(eventObj){
var tmp=eventObj.target.selectedItem;
var open = eventObj.target.getIsOpen(tmp)
eventObj.target.setIsOpen(tmp, !open,true);

}

tree.addEventListener("change", onchange);

添加以上代码就可以在点击节点标签的时候，打开或关闭该节点了。

3添加滚动条

垂直滚动条好搞一句话就可以了tree.vScrollPolicy = "auto";//设置垂直滚动条自动显示

关键是水平滚动条，这句 tree.hScrollPolicy = "on"; 只能设置他显示水平滚动条

而不能自动调整是否显示。

我经过苦思冥想N天+看了N边代码后 写了个小函数 搞定了他。

//此函数设置水平滚动条
function sethp() {
var tmp = 0;
for(var k in tree.content_mc){
if(k.indexOf("treeRow")>=0){
var tmpw:Number=tree.content_mc[k].cell.textWidth+tree.content_mc[k].cell._x; //计算水平宽度
if(tmpw>tmp){
tmp=tmpw;
}
}
}
tmp-=180 //减掉的180是Tree的宽200-20 20是垂直滚动条的宽度
if(tmp>0){
tree.hScrollPolicy = "on";
tree.maxHPosition = tmp;
}else{
tree.hScrollPolicy = "off";
}
}

然后在每次打开或关闭节点的时候调用他就可以了

tree.addEventListener("nodeOpen", sethp);
tree.addEventListener("nodeClose", sethp);

最后再来几个小东西

tree.setStyle("openEasing", mx.transitions.easing.Back.easeInOut);//节点打开关闭时的动画效果
tree.setStyle("alternatingRowColors", [0xffffff, 0xF5F8FA]);//行间隔颜色
tree.setStyle("textRollOverColor", 0x0000ff);//看名字应该知道是什么

tree.setStyle("borderStyle", "none");//设置没有边框

效果如下：