posts - 15,  comments - 8,  trackbacks - 0

在Flex缺省的Tree组件中,如果要打开某个节点的话,点击节点本身是不好用的,只能点击节点前面的那个很小的“三角符号”,这种用户体验其实是很糟糕的。不过我们可以通过Tree 中的 itemClick 事件来自己实现这个事情。

假设我们有一个Tree,它的id=”tree”,定义一个它的itemClick事件处理函数 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);
     }
}


代码很简单,就是先获取到当前点击的节点,判定它是否是一个枝节点,然后将它的打开状态更改。

最后在Tree中设置 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 阅读(1311) 评论(0)  编辑  收藏 所属分类: Open Framekwork

只有注册用户登录后才能发表评论。


网站导航: