apache-flex - フレックスでエキスパンダー(単一アイテムのアコーディオン)を実装するには?

Question

以下で説明するように動作するFlexアプリケーションがあります。

2つのことを修正したい

1. より多くの情報を表示できることをユーザーに明確にしたいと思います。現在の「Profundidad」はレーベルのみ。
2. 下に表示されている要素は、実際には状態が変化したときに表示されている別のコンポーネントであるため、上の要素と整列していません。

アコーディオンを使ってみたのですが、要素が1つのアコーディオンの場合、その要素が常に表示されているため、折りたたんだり展開したりできません

私が望むのは、これに可能な限り近い最終結果です

Answer 1

たぶん、このコードは役に立つでしょう:

MXML ファイル

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:classes="com.classes.*">

    <classes:CollapsiblePanel id="cp" title="Profundidad (Click me)" open="false">
        <mx:DataGrid> 
            <mx:ArrayList>
                <fx:Object Cantidad="" Precio=""/>
            </mx:ArrayList>
        </mx:DataGrid>
    </classes:CollapsiblePanel>
</s:Application>

CollapsiblePanel.as。私の場合、このクラスはcom.classesパッケージに含まれていることに注意してください。これを好きな場所に配置できます。

package com.classes {
import flash.events.*;
import mx.effects.AnimateProperty;
import mx.events.*;
import mx.containers.Panel;
import mx.core.ScrollPolicy;

[Style(name="closedIcon", property="closedIcon", type="Object")]
[Style(name="openIcon", property="openIcon", type="Object")]

public class CollapsiblePanel extends Panel {
        private var _creationComplete:Boolean = false;
        private var _open:Boolean = true;
        private var _openAnim:AnimateProperty;

        public function CollapsiblePanel(aOpen:Boolean = true):void
        {
            super();
            open = aOpen;
            this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
        }

        private function creationCompleteHandler(event:FlexEvent):void
        {
            this.horizontalScrollPolicy = ScrollPolicy.OFF;
            this.verticalScrollPolicy = ScrollPolicy.OFF;

            _openAnim = new AnimateProperty(this);
            _openAnim.duration = 300;
            _openAnim.property = "height";

            titleBar.addEventListener(MouseEvent.CLICK, headerClickHandler);

            _creationComplete = true;
        }

        private function headerClickHandler(event:MouseEvent):void { toggleOpen(); }

        private function callUpdateOpenOnCreationComplete(event:FlexEvent):void { updateOpen(); }

        private function updateOpen():void
        {
            if (!_open) height = closedHeight;
            else height = openHeight;
            setTitleIcon();
        }

        private function get openHeight():Number {
            return measuredHeight;
        }

        private function get closedHeight():Number {
            var hh:Number = getStyle("headerHeight");
            if (hh <= 0 || isNaN(hh)) hh = titleBar.height;
            return hh;
        }

        private function setTitleIcon():void
        {
            if (!_open) this.titleIcon = getStyle("closedIcon");
            else this.titleIcon = getStyle("openIcon");
        }

        public function toggleOpen():void
        {
            if (_creationComplete && !_openAnim.isPlaying) {

                _openAnim.fromValue = _openAnim.target.height;
                if (!_open) {
                    _openAnim.toValue = openHeight;
                    _open = true;
                    dispatchEvent(new Event(Event.OPEN));
                }else{
                    _openAnim.toValue = _openAnim.target.closedHeight;
                    _open = false;
                    dispatchEvent(new Event(Event.CLOSE));
                }
                setTitleIcon();
                _openAnim.play();
            }
        }

        public function get open():Boolean {
            return _open;
        }

        public function set open(aValue:Boolean):void {
            _open = aValue;
            if (_creationComplete) updateOpen();
            else this.addEventListener(FlexEvent.CREATION_COMPLETE, callUpdateOpenOnCreationComplete, false, 0, true);
            }

        override public function invalidateSize():void {
            super.invalidateSize();
            if (_creationComplete)
                if (_open && !_openAnim.isPlaying) this.height = openHeight;
            }
    }
}

ここで、この SWF の動作を確認できます。

この折りたたみ可能なパネルのソース コードはこちらです。これがお役に立てば幸いです。