7.12.創(chuàng)建一個(gè)帶復(fù)選框的Tree控件

2024-04-27 13:52:01

字體：大中小

供稿：網(wǎng)友

7.12.1.問題
你要?jiǎng)?chuàng)建一個(gè)樹。它的結(jié)點(diǎn)一個(gè)有三個(gè)狀態(tài)的CheckBox。
7.12.2.解決辦法
我們從三個(gè)方面去解決這個(gè)問題：
1 創(chuàng)建TreeItemRenderer。這個(gè)renderer 要包含CheckBox；
2 當(dāng)CheckBox 是第三種狀態(tài)時(shí)，將有一個(gè)黑色的小圖片覆蓋在CheckBox 上方，
也就是說，這時(shí)我們看到CheckBox 的，不是空心的，也不是里邊含有“勾”，而是里邊含有一個(gè)實(shí)心的黑方塊；
3 dataProvider 的item 中要有一個(gè)屬性用于表示CheckBox 的選中狀態(tài)；
7.12.3.討論
通常我們用tree 來表現(xiàn)一個(gè)文件系統(tǒng)，而且我們經(jīng)常需要同時(shí)選中多個(gè)文件，并對(duì)它們一起做某個(gè)操作，如刪除，復(fù)制等。所以我們需要tree 的結(jié)點(diǎn)能有一種狀態(tài)，表示它己經(jīng)表選中了。

一個(gè)父結(jié)點(diǎn)的選中或取消選中操作應(yīng)該同時(shí)觸發(fā)它的所有子結(jié)點(diǎn)同時(shí)被選中或同時(shí)取消選中。如果這些子結(jié)點(diǎn)，有些是選中狀態(tài)，有些是未選中狀態(tài)，這時(shí)父結(jié)點(diǎn)需要有第三種狀態(tài)才能更好的表現(xiàn)這種情況，所以我們需要有至少兩個(gè)狀態(tài)的CheckBox。這第三種狀態(tài)表示：某個(gè)父結(jié)點(diǎn)的子結(jié)點(diǎn)有些選中，有些未選中，而它自己是選中。

我們的解決辦法是自定義一個(gè)TreeItemRenderer，(就是下邊的CheckTreeRenderer) 它繼承自TreeItemRenderer，我們使用它實(shí)現(xiàn)三種狀態(tài)的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>