Comment implémenter un expandeur (accordéon d'un seul objet) en flexion?

Question

J'ai un Flex application qui se comporte comme décrit ci-dessous

Je veux fixer deux choses

1. Je tiens à préciser à l'utilisateur que plus d'informations peuvent être affichées. Actuel "Profundidad" est seulement une étiquette.
2. L'élément qui est illustré ci-dessous n'est pas aligné sur celui ci-dessus, puisque c'est en fait un autre élément qui est affiché lorsque l'état change

J'ai essayé d'utiliser accordéon, mais quand vous avez un Accordéon avec un seul élément, cet élément est toujours visible de sorte qu'il ne peut pas être replié et déplié

ce que je veux est le résultat final de regarder aussi près que ce posible

Answer 1

Vous pouvez facilement y parvenir en utilisant des états. Tout d'abord définir deux états: « normal » et « étendu »

<s:states> 
    <s:State name="normal"/> 
    <s:State name="expanded"/> 
</s:states> 

Ensuite, utilisez includeIn ou excludeFrom pour afficher les composants selon les besoins:

<!-- always visible components --> 
<s:Label text="FPBAF20F"/> 
<s:Label text="N/A"/> 

<s:Button label="Profundidad" 
      click="currentState = currentState == 'expanded' ? 'normal' : 'expanded'"/> 

<!-- the compra/venta grid only shown in 'expanded' state --> 
<s:DataGrid includeIn="expanded" /> 

Le gestionnaire de clic est pas très jolie, mais vous obtenez le idée: lorsque vous cliquez sur le bouton, l'état passe de «normal» à «étendu» et revient lorsque vous cliquez à nouveau.
C'est vraiment tout ce qu'il y a à faire.

Si vous préférez un hors-the-box solution, vous êtes libre d'utiliser le composant CollapsiblePanel j'ai créé: https://github.com/RIAstar/CollapsiblePanelFx;)

Answer 2

Peut-être que ce code sera utile:

fichier 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. Notez que dans mon cas, cette classe est dans le paquet com.classes, vous pouvez mettre cela dans l'endroit que vous voulez.

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; 
      } 
    } 
} 

Yon peut voir ce SWF en action here.

Le code source de ce panneau pliable est here. J'espère que cela vous aidera.