在Flex缺省的Tree組件中，如果要打開某個(gè)節(jié)點(diǎn)的話，點(diǎn)擊節(jié)點(diǎn)本身是不好用的，只能點(diǎn)擊節(jié)點(diǎn)前面的那個(gè)很小的“三角符號(hào)”，這種用戶體驗(yàn)其實(shí)是很糟糕的。不過我們可以通過Tree 中的 itemClick 事件來自己實(shí)現(xiàn)這個(gè)事情。
假設(shè)我們有一個(gè)Tree，它的id=”tree”，定義一個(gè)它的itemClick事件處理函數(shù) itemClickHandler:
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}
代碼很簡(jiǎn)單，就是先獲取到當(dāng)前點(diǎn)擊的節(jié)點(diǎn)，判定它是否是一個(gè)枝節(jié)點(diǎn)，然后將它的打開狀態(tài)更改。
最后在Tree中設(shè)置 itemClick=”itemClickHandler(event)” 就OK了。
main.mxml（英文鏈接地址：http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/）
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-rows-in-a-tree-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}
private function tree_labelFunc(item:XML):String {
var children:ICollectionView;
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
children = tree.dataDescriptor.getChildren(item);
suffix = " (" + children.length + ")";
}
return item[tree.labelField] + suffix;
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<folder label="One">
<folder label="One.A">
<item label="One.A.1" />
<item label="One.A.2" />
<item label="One.A.3" />
<item label="One.A.4" />
<item label="One.A.5" />
</folder>
<item label="One.1" />
<item label="One.2" />
</folder>
<folder label="Two">
<item label="Two.1" />
<folder label="Two.A">
<item label="Two.A.1" />
<item label="Two.A.2" />
</folder>
</folder>
</root>
</mx:XML>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
labelFunction="tree_labelFunc"
width="300"
rowCount="6"
itemClick="tree_itemClick(event);" />
</mx:Application>
posted on 2008-09-02 19:27
lvq810 閱讀(1328)
評(píng)論(0) 編輯 收藏 所屬分類:
Open Framekwork