flex tree toolTip
ToolTip只能对Flex Tree的整个组件进行设置(使用Tree的dataTipField属性设置),并不能对每个树节点都设置。如果要实现每个树节点又不同的ToolTip功能,那么就只能自定义ToolTip了。主要有两种方式:
1、dataTipFunction(不推荐使用,虽然方法简单,但是效果非常不好。tip的位置不能动态改变,会出现不停闪烁的情况)
2、itemRollOver 和 itemRollOut(这种效果好,控制灵活,但是相对来说复杂一点)
===================================================
Tree要显示的数据如下:
===================================================
第一种情况:
===================================================
第二种情况:
转载至:
http://viking-liu.iteye.com/blog/1152657
1、dataTipFunction(不推荐使用,虽然方法简单,但是效果非常不好。tip的位置不能动态改变,会出现不停闪烁的情况)
2、itemRollOver 和 itemRollOut(这种效果好,控制灵活,但是相对来说复杂一点)
===================================================
Tree要显示的数据如下:
- <projects>
- <project name="SapIntegration" pid="1">
- <depot name="Yorktown:1770" did="1" desc="p4admin:Hiren"/>
- <depot name="Halifax: 1700" did="2" desc="p4admin:Hiren Dave"/>
- </project>
- <project name="LiveCycle Core QE" pid="2">
- <depot name="faramir:1666" did="3" desc="p4admin:Dean Harmon"/>
- <depot name="redcloud:1850 " did="4" desc="p4admin:Kiyotaka Taki"/>
- </project>
- </projects>
===================================================
第一种情况:
- private function getToolTip(obj:Object):String{
- var xml:XML=obj as XML;
- return obj.@desc;
- }
- <mx:Tree id="projects" width="207" height="100%"
- change="selectChange(event)"
- dataProvider="{projectdepots}" labelField="@name"
- dataTipFunction="getToolTip" showDataTips="true"/>
===================================================
第二种情况:
- import mx.controls.ToolTip;
- import mx.events.ListEvent;
- import mx.managers.ToolTipManager;
- import flash.geom.Point;
- private var myToolTip:ToolTip;
- private function itemRollOverHandler(event:ListEvent):void{
- var node:XML=event.itemRenderer.data as XML;
- if(node.localName()!="project"){
- var toolTip:String= node.@desc;
- var p:Point=new Point();
- p.x=mouseX;
- p.y=mouseY;
- if (myToolTip != null){
- ToolTipManager.destroyToolTip(myToolTip);
- }
- var ltg:Point=projects.contentToLocal(p);
- myToolTip= ToolTipManager.createToolTip(toolTip, ltg.x, ltg.y) as ToolTip;
- }
- }
- private function itemRollOutHandler(event:ListEvent):void{
- if (myToolTip is ToolTip){
- ToolTipManager.destroyToolTip(myToolTip);
- }
- myToolTip=null;
- }
- <mx:Tree id="projects" width="207" height="100%"
- change="selectChange(event)"
- dataProvider="{projectdepots}" labelField="@name"
- itemRollOver="itemRollOverHandler(event)"
- itemRollOut="itemRollOutHandler(event)"
- showDataTips="true"/>