Question

我目前正在FLEX 4中开发一个动态LineChart。我正在我的LineChart旁边实现一个Tree控件，它将过滤LineChart数据提供者和lineseries。树控件有几个分支，最后在最后一个分支的底部有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');
            }

        }

我正在查看以下example here中的TreeItemRenderer覆盖类：

在该示例中，它们覆盖“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的setter。在重写的方法中执行以下操作：

编辑：添加了周围的MXML（请注意，在创建新的Tree项呈示器时，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>

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

1 个答案: