学习了一段时间的Flex,感觉Flex再成熟一些的话,Flex就很有可能成为视图层的最主流技术了.期待着Flex4,Flex5的改进吧.
这篇短文说一下使用Flex中树组件过程中两个使用小技巧吧.
可能刚刚学习的朋友会发现树组件的以下两个小问题:
- 点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.
- 点击同一个节点第二次的时候change事件是不触发的.
下边的小例子解决这两个小问题:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">
<mx:XMLList id="treeData">
<node id="10000" label="评估计划">
<node id="10100" label="计划生成器">
<node id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>
<node id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>
</node>
<node id="10200" label="计划管理">
<node id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>
<node id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>
<node id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>
</node>
<node id="10300" label="我的博客">
<node id="10301" label="北边村人" canvas="javaest.iteye.com"/>
</node>
</node>
</mx:XMLList>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Button;
import mx.containers.Canvas;
import mx.controls.Alert;
private function addNewTabPage(event:Event):void {
var selectedNode:XML=Tree(event.target).selectedItem as XML;
var id:String=selectedNode.@id;
var label:String=selectedNode.@label;
var canvasClassName:String=selectedNode.@canvas;
Alert.show(label);
if (functionTree.dataDescriptor.isBranch(selectedNode)) {
functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode));
}
Tree(event.target).selectedItem=null;
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" dropShadowEnabled="false" title="新闻管理">
<mx:Tree id="functionTree" change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true" dataProvider="{treeData}" labelField="@label" borderStyle="none">
</mx:Tree>
</mx:Panel>
</mx:Application>
其中34,35,36行解决了第一个问题
37解决了第二个问题
分享到:
相关推荐
前些日子看网上只有虚线连接的例子,无聊就给改了改
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
flex tree 复选框,以及父目录的三种状态。(全部选中,部分选中,没有选中)
flex带复选框的tree,包含源代码,需要用到的朋友请下载
flex tree 教程二
里面收集了一些Flex的tree控件的用法和实例的源代码
以前项目里用的一个带线的tree组件, 和一般的tree一样用,只是加了线连接的效果,多层次的线都很好的展示
flex tree 拖拽,flex tree 节点移动。
flex tree+checkbox可实现级联勾选
flex4中tree组件分层显示数据示例代码(可直接运行)
flex中tree和checkbox结合使用的插件,该压缩包包含两个文档,一个是tree和checkbox结合使用的插件,另一个是使用示例
flex tree 自动显示横向滚动条 自定义重写
flex 3组件使用与技巧大全,能帮助你更好的掌握组件应用,快速入门
flex 修改 tree的icon,根据数据源root 中不同的参数修改不同的图片。
去掉flex tree控件默认的图标并加上线连接。
本资源中包括Tree的文件和Tree的渲染文件(Checkbox),实现功能为点击树不获取值(也可以获取,改变一个变量即可),只有勾选Checkbox才能得到。并添加到集合中
Flex3组件介绍,包含flex3的所有组件介绍并有例子
在网上找到了关于flex 的tree在前面加上checkbox, 我经过改动, 现在很适合使用。
自己整理的关于Twaver组件在Flex中的使用,不对的地方忘多提意见
这是原始的库了,里面少了一个针对按下ESC键的处理,这个在使用的时候可以自己加,另外一个问题就是由于这个库是FLEX3的,所以在FLEX4.0或以上的版本(使用的spark主题)的时候,需要修改类里面的Canvas为Group或者...