7.12.创建一个带复选框的Tree控件

2024-04-27 13:52:01

字体：大中小

来源：转载

供稿：网友

7.12.1.问题
你要创建一个树。它的结点一个有三个状态的CheckBox。
7.12.2.解决办法
我们从三个方面去解决这个问题：
1 创建TreeItemRenderer。这个renderer 要包含CheckBox；
2 当CheckBox 是第三种状态时，将有一个黑色的小图片覆盖在CheckBox 上方，
也就是说，这时我们看到CheckBox 的，不是空心的，也不是里边含有“勾”，而是里边含有一个实心的黑方块；
3 dataProvider 的item 中要有一个属性用于表示CheckBox 的选中状态；
7.12.3.讨论
通常我们用tree 来表现一个文件系统，而且我们经常需要同时选中多个文件，并对它们一起做某个操作，如删除，复制等。所以我们需要tree 的结点能有一种状态，表示它己经表选中了。

一个父结点的选中或取消选中操作应该同时触发它的所有子结点同时被选中或同时取消选中。如果这些子结点，有些是选中状态，有些是未选中状态，这时父结点需要有第三种状态才能更好的表现这种情况，所以我们需要有至少两个状态的CheckBox。这第三种状态表示：某个父结点的子结点有些选中，有些未选中，而它自己是选中。

我们的解决办法是自定义一个TreeItemRenderer，(就是下边的CheckTreeRenderer) 它继承自TreeItemRenderer，我们使用它实现三种状态的CheckBox。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();" >
<mx:Script>
<![CDATA[
import mx.collections.*;
[Bindable]
public var folderList:XMLList = <> 
<folder state="unchecked" label="Marketing Collateral" isBranch="true">
<folder state="unchecked" isBranch="true" label="Media, PR, and Communications">
<folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers"/>
<folder state="unchecked" isBranch="false" label="Articles Reprints"/>
<folder state="unchecked" isBranch="false" label="Interviews and Transcripts"/>
<folder state="unchecked" isBranch="false" label="Press Kits"/>
<folder state="unchecked" isBranch="false" label="Press Releases"/>
<folder state="unchecked" isBranch="false" label="Quick Hits"/>
<folder state="unchecked" isBranch="false" label="Rep Talking Points"/>
<folder state="unchecked" isBranch="false" label="Special Updates"/>
<folder state="unchecked" isBranch="false" label="White Papers"/>
</folder>
<folder state="unchecked" isBranch="true" label="Forms and Applications">
<folder state="unchecked" isBranch="false" label="Applications" />
<folder state="unchecked" isBranch="false" label="Forms" />
</folder>
</folder>
</>;
[Bindable]
public var folderCollection:XMLListCollection;
private function init() : void {
folderCollection = new XMLListCollection(folderList);
checkTree.dataProvider = folderCollection;
}

]]>
</mx:Script>
<mx:Tree id="checkTree" itemRenderer="oreilly.cookbook.CheckTreeRenderer" labelField="@label" width="100%" height="100%" >
</mx:Tree>
</mx:Application>