Flex personnalisée de rendu d'élément de l'élément affiché dans la zone de liste déroulante

Par défaut, vous ne pouvez pas faire cela. Toutefois, si vous étendez la zone de liste déroulante, vous pouvez ajouter cette fonctionnalité facilement. Voici un exemple rapide, c'est une ébauche de la version et probablement des besoins de tests et de peaufinage, mais il montre comment vous pourriez faire cela.

package
{
    import mx.controls.ComboBox;
    import mx.core.UIComponent;

    public class ComboBox2 extends ComboBox
    {
        public function ComboBox2()
        {
            super();
        }

        protected var textInputReplacement:UIComponent;

        override protected function createChildren():void {
            super.createChildren();

            if ( !textInputReplacement ) {
                if ( itemRenderer != null ) {
                    //remove the default textInput
                    removeChild(textInput);

                    //create a new itemRenderer to use in place of the text input
                    textInputReplacement = itemRenderer.newInstance();
                    addChild(textInputReplacement);
                }
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if ( textInputReplacement ) {
                textInputReplacement.width = unscaledWidth;
                textInputReplacement.height = unscaledHeight;
            }
        }
    }
}

OriginalL'auteur Matt MacLean

Je l'ai étendu son code un peu plus loin. Dans certains cas, en cliquant sur n'a pas ouvert la boîte de dépôt avec mon moteur de rendu et j'ai remarqué que la normale Flex zone de liste déroulante peaux ne se déclenche pas. Ainsi, dans replaceTextInput() j'ai ajouté quelques autres écouteurs d'événements et d'enregistrer une référence à la zone de liste déroulante du bouton utilisé pour afficher les peaux. Maintenant, il se comporte exactement comme la normale zone de liste déroulante.

Voici le code:

 paquet 
{ 
import flash.les événements.De l'événement; 
import flash.les événements.KeyboardEvent; 
import flash.les événements.MouseEvent; 

import mx.de liaison.utils.BindingUtils; 
import mx.les contrôles.Bouton; 
import mx.les contrôles.Zone de liste déroulante; 
import mx.de base.IFactory; 
import mx.de base.UIComponent; 
import mx.les événements.DropdownEvent; 

/** 
* L'Extension de la norme de zone de liste déroulante qui va utiliser l'affectés "itemRenderer' 
* pour la liste des éléments et de l'élément sélectionné. 
* 
* Basé sur le code à partir de: 
* http://stackoverflow.com/questions/269773/flex-custom-item-renderer-for-the-displayed-item-in-the-combobox 
*/
public class ComboBoxFullRenderer étend la zone de liste déroulante 
{ 
protégé var textInputReplacement:UIComponent; 
private var _increaseW:Number = 0; 
private var _increaseH:Number = 0; 


/** 
* Assure le suivi de l'actuel état ouverture/fermeture de la liste déroulante. 
*/
protégé var _isOpen:Boolean = false; 

/** 
* Stocke une référence à la "Bouton" qui recouvre la zone de liste déroulante. Permet 
* nous pour passer des événements, de sorte que les peaux soient correctement déclenché. 
*/
protégé var _buttonRef:Bouton = null; 


/** 
* Constructeur. 
*/
fonction publique ComboBoxFullRenderer() { 
super(); 
} 


/** 
* Définit une valeur pour augmenter la largeur de notre zone de liste déroulante pour ajuster la taille. 
* 
* @param val-Nombre de pixels pour augmenter la largeur de la zone de liste déroulante. 
*/
public function set increaseW(val:Number):void { 
_increaseW = val; 
} 

/** 
* Définit une valeur pour augmenter la hauteur de notre zone de liste déroulante pour ajuster la taille. 
* 
* @param val-Nombre de pixels d'augmenter la hauteur de la zone de liste déroulante. 
*/
public function set increaseH(val:Number):void { 
_increaseH = val; 
} 


/** 
* Remplacer le "itemRenderer' setter donc on peut aussi remplacer les sélectionnés 
* rendu d'élément. 
* 
* @param valeur Le moteur de rendu à utiliser pour l'affichage de la liste des éléments de liste 
* et de l'élément sélectionné. 
*/
override public function set itemRenderer(valeur:IFactory):void { 
super.itemRenderer = valeur; 
replaceTextInput(); 
} 


/** 
* Remplacer la base " createChildren()' de routine d'appeler nos " replaceTextInput()' 
* méthode pour remplacer le standard sélectionné rendu d'élément. 
* 
* @see #replaceTextInput(); 
*/
override protected function createChildren():void { 
super.createChildren(); 
replaceTextInput(); 
} 


/** 
* La Routine, afin de remplacer la zone de liste déroulante 'textInput' enfant avec notre propre enfant 
* afficher les données sélectionnées à l'élément. Va créer une instance de 
* le "itemRenderer' ensemble de cette zone de liste déroulante. 
*/
fonction protégée replaceTextInput():void { 
if ( !textInputReplacement ) { 
si ( ce.itemRenderer != null && textInput != null ) { 
//supprimer la valeur par défaut textInput 
removeChild(textInput); 

//créer une nouvelle itemRenderer exemple, d'utiliser à la place de la saisie de texte 
textInputReplacement = ce.itemRenderer.newInstance(); 
//Écouter pour les clics afin que nous puissions ouvrir/fermer le menu déroulant lors de l' 
//moteur de rendu composants sont utilisés. 
textInputReplacement.la méthode addEventListener(MouseEvent.CLIQUEZ sur, _onClick); 
//Écouter les événements de souris sur notre moteur de rendu afin que nous puissions nourrir à 
//la zone de liste déroulante de superposition bouton. Ce sera assurez-vous que le bouton de peaux 
//sont activés. Voir la zone de liste déroulante::commitProperties() code. 
textInputReplacement.la méthode addEventListener(MouseEvent.MOUSE_DOWN, _onMouseEvent); 
textInputReplacement.la méthode addEventListener(MouseEvent.MOUSE_UP, _onMouseEvent); 
textInputReplacement.la méthode addEventListener(MouseEvent.ROLL_OVER, _onMouseEvent); 
textInputReplacement.la méthode addEventListener(MouseEvent.ROLL_OUT, _onMouseEvent); 
textInputReplacement.la méthode addEventListener(KeyboardEvent.KEY_DOWN, _onMouseEvent); 

//Lier les données de la textInputReplacement à l'élément sélectionné 
BindingUtils.bindProperty(textInputReplacement, "données", cette, "selectedItem", true); 

//Ajouter notre moteur de rendu comme à un enfant. 
addChild(textInputReplacement); 

//Écouter pour ouvrir fermer afin que nous puissions maintenir l'état. L' 
//'isShowingDropdown la propriété est mx_internal afin de ne pas 
//avoir accès. 
c'.la méthode addEventListener(DropdownEvent.OUVERT, _onOpen); 
c'.la méthode addEventListener(DropdownEvent.À PROXIMITÉ, _onClose); 

//Enregistrer une référence à la mx_internal bouton de la liste déroulante. 
//Nous avons besoin de ce nous pouvons donc appeler sa méthode dispatchEvent (). 
for (var i:int = 0; i < ce.numChildren; i++) { 
var temp:Object = ce.getChildAt(i); 
si (temp est le Bouton) { 
_buttonRef = temp que le Bouton; 
break; 
} 
} 
} 
} 
} 


/** 
* Détecter les événements ouverts sur la liste déroulante pour garder une trace de l'actuel 
* liste déroulante état, de sorte que nous puissions réagir correctement à un clic sur notre sélection 
* rendu d'élément. 
* 
* @param événement Le DropdownEvent.OUVRIR les événements de la liste déroulante. 
*/
fonction protégée _onOpen(cas:DropdownEvent) : void { 
_isOpen = true; 
} 


/** 
* Détecter la proximité des événements sur la liste déroulante pour garder une trace de l'actuel 
* liste déroulante état, de sorte que nous puissions réagir correctement à un clic sur notre sélection 
* rendu d'élément. 
* 
* @param événement Le DropdownEvent.PRÈS de l'événement de la liste déroulante. 
*/
fonction protégée _onClose(cas:DropdownEvent) : void { 
_isOpen = false; 
} 


/** 
* Lorsque nous détectons un clic sur notre moteur de rendu d'ouvrir ou de fermer la liste déroulante 
* sur la base de savoir si la liste déroulante est actuellement ouvert/fermé. 
* 
* @param événement L'événement CLICK de notre sélection de rendu d'élément. 
*/
fonction protégée _onClick(event:MouseEvent) : void { 
si (_isOpen) { 
c'.fermer(événement); 
} else { 
c'.open(); 
} 
} 


/** 
* Réagir à certaines souris/clavier événements sur notre sélection de rendu d'élément et 
* passer les événements de la zone de liste déroulante "bouton" de sorte que les peaux sont correctement 
* appliqué. 
* 
* @param événement de souris ou de clavier événement à envoyer pour le bouton zone de liste déroulante. 
* 
*/
fonction protégée _onMouseEvent(event:event) : void { 
si (_buttonRef != null) { 
_buttonRef.dispatchEvent(événement); 
} 
} 
} //fin de la classe 
} //fin du paquet 

OriginalL'auteur John

Je cherchais un moyen de faire cela à l'aide de l'Étincelle zone de liste déroulante.

Ce fil a été très utile pour moi, mais jusqu'à présent, seules des réponses sur la façon de le faire en utilisant un mx:zone de liste déroulante. J'ai pensé que je devrais ajouter ma réponse sur la façon de le faire à l'aide d'une étincelle zone de liste déroulante.

1. Créer une nouvelle peau de la zone de liste déroulante
2. Cacher et de désactiver le composant textInput
3. Insérer votre propre composant

C'est ce que la peau ressemblerait à:

<s:SparkSkin>
<... Lots of other stuff/>
<s:BorderContainer height="25">
<WHATEVER YOU NEED HERE!/>
</s:BorderContainer>
<!-- Disable the textInput and hide it -->
<s:TextInput id="textInput"
left="0" right="18" top="0" bottom="0" 
skinClass="spark.skins.spark.ComboBoxTextInputSkin"
visible="false" enabled="false"/> 
</s:SparkSkin>

Avec l'Étincelle ComboBox ce processus est très facile et ne vous obligent pas à étendre la zone de liste déroulante.

OriginalL'auteur sixtyfootersdude