如何覆盖 Flex Tree 控件中的子节点控件

Question

我目前正在 FLEX 4 中开发动态 LineChart。我正在 LineChart 旁边实现一个 Tree 控件，它将过滤 LineChart 数据提供程序和线系列。树控件有多个分支，最后一个分支的底部有 5 个子节点（叶节点）。

我需要将叶节点/子节点显示为树控件内的复选框。据我了解，这需要在 TreeItemRenderer 类中进行重写。这就是我对如何实现这一点感到有点困惑的地方。

目前，我可以在我的主 MXML 组件中使用此代码区分叶子和分支。我添加此内容是因为它可能对一些初级 FLEX 开发人员（例如我自己）有所帮助，因为他们无法轻松找到此功能的详细记录：

            private function treeClick(e:ListEvent):void {

            _selectedItem = Tree(e.currentTarget).selectedItem;

            if(mainTree.dataDescriptor.isBranch(_selectedItem)) {
                Alert.show('branch click');
            }
            else {
                Alert.show('leaf node click');
            }

        }

我正在查看以下 示例：

在示例中，它们重写“createChildden”超级函数以将复选框添加到树控件。

我的问题是，我可以直接在 MXML 组件中重写 createChildren 函数，而不必使用整个类文件来重写此功能吗？我必须重新发明轮子才能做到这一点吗？

另外，在覆盖函数中如何区分我的treeItem是叶节点而不是父节点？我只想添加叶节点的复选框，如何区分？以下示例将复选框添加到所有分支和叶节点，但我只想将复选框添加到叶节点/子节点。你会如何处理这个问题？

        override protected function createChildren( ): void
        {
            super.createChildren( );
            if( !_checkbox )
            {
                _checkbox = new CheckBoxExtended( );
                _checkbox.allow3StateForUser = false;
                _checkbox.addEventListener( MouseEvent.CLICK, onCheckboxClick );
                addChild( _checkbox );
            }
        }

这是我正在使用的 XML：

    <mx:XMLList id="treeData">
    <node label="DAIX">
        <node label="Account 1">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="41" isChecked="false">
                </node>
                <node label="Device 2" oid="42" isChecked="false">
                </node>                 
            </node>
        </node>
        <node label="Account 2">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>             
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>                 
            </node>
        </node>
    </node>    
</mx:XMLList>

这是我的树标签：

<mx:Tree id="mainTree" dataProvider="{treeData}" itemRenderer="TreeCheckBoxItemRenderer" labelField="@label" showRoot="false" width="100%" height="100%" itemClick="treeClick(event)" />

Answer 1

我要做的如下：创建从 TreeItemRender 派生的项目渲染器作为 MXML 组件，并将复选框包含在 MXML 中，然后覆盖 listData 的设置器。在您重写的方法中执行如下操作：

编辑：添加了周围的 MXML （请注意，MXML 几乎与 FB 4 在创建新的树项渲染器时默认生成的内容完全相同，并且我尚未在树中对此进行测试。）

EDIT2：添加了用于在组件和数据之间来回移动检查状态的代码。

<fx:Script>
    <![CDATA[
        import mx.controls.treeClasses.TreeListData;

        override public function set listData(value:BaseListData):void
        {
            super.listData = value
            this.myCheckbox.visible = !(value as TreeListData).hasChildren;
            this.myCheckbox.includeInLayout = !(value as TreeListData).hasChildren;
        }

        override public function set data(value:Object):void {
            super.data = value;

            this.myCheckbox.selected = this.data.isChecked;
        }

        private function onCheckboxChange(e:Event):void {
            this.data.isChecked = this.myCheckbox.selected;
        }
    ]]>
</fx:Script>
<s:states>
    <s:State name="normal" />      
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:CheckBox id="myCheckbox" change="onCheckboxChange(event)"/>
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>