cacher flex combobox et montrer flèche vers le bas

Question

Je cherche à mettre en œuvre une zone de texte de recherche comme suit:

Lorsque l'utilisateur commence à taper et il y a des résultats non nuls, la zone de texte va ouvrir et afficher les résultats ci-dessous il. Lorsque l'utilisateur sélectionne un résultat, la zone de texte est fermée, mais cette fois avec une flèche vers le bas (comme une zone de liste déroulante) afin que l'utilisateur puisse rouvrir la liste.

Je soupçonne que j'ai vraiment besoin d'une combobox avec la capacité de cacher/montrer la flèche vers le bas. Comment est-ce que je fais cela dans Flex?

Merci d'avance.

Answer 1

j'ai découvert un moyen facile de le faire:

setStyle ("arrowButtonWidth", 0);

Dans mon combobox personnalisé, je définir la largeur initiale du bouton fléché à 0.

Ensuite, en cas de changement de la liste,

addEventListener(ListEvent.CHANGE, changeHandler); 

si la taille de l'dataprovider est supérieur à 1, la largeur de la flèche est ramenée à (par exemple) 20

Cette approche est beaucoup plus simple que les approches ci-dessus. Si vous connaissez un piège de mon approche, s'il vous plaît partager.

Answer 2

Que diriez-vous de créer un canevas personnalisé simple avec les deux composants (textinput et combo) avec deux états. Vous affichez l'entrée de texte dans un état et le combo dans l'autre état?

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> 
    <mx:states> 
     <mx:State name="combo"> 
      <mx:RemoveChild target="{textinput1}"/> 
      <mx:AddChild position="lastChild"> 
       <mx:ComboBox x="48" y="10"></mx:ComboBox> 
      </mx:AddChild> 
     </mx:State> 
    </mx:states> 
    <mx:TextInput x="48" y="10" id="textinput1"/> 
    <mx:Label x="10" y="12" text="Text"/> 

</mx:Canvas> 

Answer 3

Vous pouvez également fournir un habillage de bouton personnalisé pour les deux cas, qui serait accessible en changeant le nom de style. Ce serait potentiellement plus léger que la solution de l'utilisateur294702.

Par exemple, en utilisant des noms fictifs pour la source et symboles:

.comboBoxWithArrow { 
    up-skin: Embed(source="graphics.swf",symbol="comboArrowUp"); 
    down-skin: Embed(source="graphics.swf",symbol="comboArrowDown"); 
    over-skin: Embed(source="graphics.swf",symbol="comboArrowOver"); 
    disabled-skin: Embed(source="graphics.swf",symbol="comboArrowDisabled"); 
    /* and any other skin states you want to support */ 
} 

.comboBoxWithoutArrow { 
    up-skin: Embed(source="graphics.swf",symbol="comboNoArrowUp"); 
    down-skin: Embed(source="graphics.swf",symbol="comboNoArrowDown"); 
    over-skin: Embed(source="graphics.swf",symbol="comboNoArrowOver"); 
    disabled-skin: Embed(source="graphics.swf",symbol="comboNoArrowDisabled"); 
    /* and any other skin states you want to support */ 
} 

Si vos conditions le justifient, réglez le styleName à celui qui montre la flèche, réglez autrement à celui qui ne montre aucune flèche.