Гибкое динамическое изменение высоты дерева

Question

Я хочу иметь средство визуализации узлов дерева, которое действует следующим образом:

• Нажав на нее, вы измените высоту узла.

Я попытался сделать следующее: создать собственный класс, производный от UIComponent а затем вставьте его в средство визуализации узлов дерева, но по какой-то причине он не работает так, как я ожидал.

Вот код:

package
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;

    import mx.controls.Tree;
    import mx.core.UIComponent;

    public class Expander extends UIComponent
    {
        public var expanded : Boolean = false;

        public function Expander()
        {
            super();
            this.redraw();
            this.addEventListener( MouseEvent.CLICK, onClick );
        }

        private function redraw( newWidth : Number = 60, newHeight : Number = 20 ) : void
        {
            this.graphics.clear();
            this.graphics.beginFill( 0x0000FF, 0.7 );
            this.graphics.drawRect( 0, 0, newWidth, newHeight );
            this.graphics.endFill();
        }

        private function onClick( e : MouseEvent ) : void
        {
            e.stopImmediatePropagation();
            colapseExpand();
        }

        private function colapseExpand() : void
        {
            expanded = ! expanded;
            if( expanded )
                redraw( this.width, 100 );
            else
                redraw();

            ( parent as Tree ).invalidateSize();

        }
    }
}

Вот код класса рендерера:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      xmlns:lx="*">

    <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="0xFFAFFF" />
            </s:fill>
        </s:Rect>
        <s:Group id="disclosureGroup">
            <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
        </s:Group>
        <s:BitmapImage source="{treeListData.icon}" />
        <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
        <lx:Expander width="100%">

        </lx:Expander>
    </s:HGroup>
</s:MXTreeItemRenderer>

Пользовательский класс отмечен как lx:Expander width="100%".

Answer 1

То, что вы хотите сделать, это создать дерево с variableRowHeight="true", и затем в вашем средстве визуализации элементов вы можете использовать состояния, чтобы «развернуть» средство визуализации элементов:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      xmlns:lx="*">

    <s:states>
        <s:State name="normal" />            
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:HGroup height.selected="75">
        <s:Label text="Not expanded" text.selected="EXPANDED!" />
    </s:HGroup>
</s:MXTreeItemRenderer>

Этот должен расширяться, когда выбран средство визуализации элементов, но я не проверял его. Ваше дерево, вероятно, должно иметь свойство selectable = true, или вы всегда можете изменить состояние вручную в событии щелчка в средстве визуализации элементов.