Tree 组件使用的两个小技巧
2008-09-01 08:00
323 查看
学习了一段时间的Flex,感觉Flex再成熟一些的话,Flex就很有可能成为视图层的最主流技术了.期待着Flex4,Flex5的改进吧.
这篇短文说一下使用Flex中树组件过程中两个使用小技巧吧.
可能刚刚学习的朋友会发现树组件的以下两个小问题:
点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.
点击同一个节点第二次的时候change事件是不触发的.
下边的小例子解决这两个小问题:
Xml代码
<?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="<SPAN class=hilite2>tree</SPAN>Data">
<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.javaeye.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=<SPAN class=hilite2>Tree</SPAN>(event.target).selectedItem as XML;
var id:String=selectedNode.@id;
var label:String=selectedNode.@label;
var canvasClassName:String=selectedNode.@canvas;
Alert.show(label);
if (function<SPAN class=hilite2>Tree</SPAN>.dataDescriptor.isBranch(selectedNode)) {
function<SPAN class=hilite2>Tree</SPAN>.expandItem(selectedNode, !function<SPAN class=hilite2>Tree</SPAN>.isItemOpen(selectedNode));
}
<SPAN class=hilite2>Tree</SPAN>(event.target).selectedItem=null;
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" dropShadowEnabled="false" title="新闻管理">
<mx:<SPAN class=hilite2>Tree</SPAN> id="function<SPAN class=hilite2>Tree</SPAN>" change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true" dataProvider="{<SPAN class=hilite2>tree</SPAN>Data}" labelField="@label" borderStyle="none">
</mx:<SPAN class=hilite2>Tree</SPAN>>
</mx:Panel>
</mx:Application>
这篇短文说一下使用Flex中树组件过程中两个使用小技巧吧.
可能刚刚学习的朋友会发现树组件的以下两个小问题:
点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.
点击同一个节点第二次的时候change事件是不触发的.
下边的小例子解决这两个小问题:
Xml代码
<?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="<SPAN class=hilite2>tree</SPAN>Data">
<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.javaeye.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=<SPAN class=hilite2>Tree</SPAN>(event.target).selectedItem as XML;
var id:String=selectedNode.@id;
var label:String=selectedNode.@label;
var canvasClassName:String=selectedNode.@canvas;
Alert.show(label);
if (function<SPAN class=hilite2>Tree</SPAN>.dataDescriptor.isBranch(selectedNode)) {
function<SPAN class=hilite2>Tree</SPAN>.expandItem(selectedNode, !function<SPAN class=hilite2>Tree</SPAN>.isItemOpen(selectedNode));
}
<SPAN class=hilite2>Tree</SPAN>(event.target).selectedItem=null;
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" dropShadowEnabled="false" title="新闻管理">
<mx:<SPAN class=hilite2>Tree</SPAN> id="function<SPAN class=hilite2>Tree</SPAN>" change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true" dataProvider="{<SPAN class=hilite2>tree</SPAN>Data}" labelField="@label" borderStyle="none">
</mx:<SPAN class=hilite2>Tree</SPAN>>
</mx:Panel>
</mx:Application>
<?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.javaeye.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>
相关文章推荐
- Flex Tree 组件使用的两个小技巧
- Flex Tree 组件使用的两个小技巧
- 每天学一点flash(13) tree组件 与xml配合配合使用
- 关于Flex 中tree组件的使用
- Tree组件使用指南之五:点击树节点文字展开或收缩其子节点
- 使用Baidu的两个搜索小技巧
- 安卓Service组件使用系列6:使用AIDL完成两个进程间的通信
- 使用EasyUI的tree组件,叶子节点下会加载所有节点数据,形成死循环......
- Tree组件使用指南之八:使用Self-Referencing VO创建Tree
- Easyui实例--tree组件的使用2
- Bootstrap树控件(Tree控件组件)使用经验分享
- flex基础之tree组件的使用
- Tree组件使用指南之六:不同的树节点显示不同的图标
- 关于前端组件bootstrap使用上的几点小技巧
- WordPres对前端页面调试时的两个PHP函数使用小技巧
- Tree组件使用指南之三:定制SelectionListener
- 使用extjs的Tree组件时,节点ID设置问题
- 使用Ext2的Tree组件
- 每天学一点flash(13) tree组件 与xml配合配合使用
- Tree组件使用指南之一:创建