Flex benutzerdefinierten Elementrenderer für den angezeigten Eintrag in der combobox

Standardmäßig ist dies nicht möglich. Wenn Sie jedoch verlängern ComboBox können Sie diese Funktionalität hinzufügen, leicht. Hier ist ein kurzes Beispiel, es ist eine Rohfassung und muss wahrscheinlich testen /optimieren, aber es zeigt, wie könnten Sie dies erreichen.

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

Habe ich verlängert Dane ' s code ein bisschen weiter. In einigen Fällen Klick nicht öffnen Sie die drop-box mit meinem renderer, und ich bemerkte, dass das normale Flex-ComboBox-skins nicht ausgelöst. So in replaceTextInput() ich Hinzugefügt einige zusätzliche event-Listener, und speichern Sie einen Verweis auf das ComboBox-Taste dient zum anzeigen der skins. Nun verhält es sich genauso wie bei den normalen ComboBox.

Hier der code:

 Paket 
{ 
import von flash.Veranstaltungen.Ereignis; 
import von flash.Veranstaltungen.KeyboardEvent; 
import von flash.Veranstaltungen.MouseEvent; 

import mx.die Bindung.utils.BindingUtils; 
import mx.controls.- Taste; 
import mx.controls.ComboBox; 
import mx.core.IFactory; 
import mx.core.UIComponent; 
import mx.Veranstaltungen.DropdownEvent; 

/** 
* Erweiterung der standard-ComboBox, wird die Verwendung der zugewiesenen 'itemRenderer' 
* für die Elemente der Liste und das ausgewählte Element. 
* 
* Basiert auf code aus: 
* http://stackoverflow.com/questions/269773/flex-custom-item-renderer-for-the-displayed-item-in-the-combobox 
*/
public class ComboBoxFullRenderer erstreckt ComboBox 
{ 
geschützt var textInputReplacement:UIComponent; 
private var _increaseW:Number = 0; 
private var _increaseH:Number = 0; 


/** 
* Verfolgt die aktuelle öffnen/schließen-Status von der drop-down-Liste. 
*/
geschützt var _isOpen:Boolean = false; 

/** 
* Speichert eine Referenz auf die 'Button', welche überlagerungen der ComboBox. Erlaubt 
* uns passieren Ereignisse, um so die skins sind richtig ausgelöst. 
*/
geschützt var _buttonRef:Button = null; 


/** 
* Konstruktor. 
*/
public function ComboBoxFullRenderer() { 
super(); 
} 


/** 
* Legt einen Wert zum erhöhen der Breite unserer ComboBox anpassen Dimensionierung. 
* 
* @param val Zahl der Pixel zu erhöhen, die Breite der ComboBox. 
*/
public function set increaseW(val:Number):void { 
_increaseW = val; 
} 

/** 
* Legt einen Wert zu erhöhen, die Höhe unserer ComboBox anpassen Dimensionierung. 
* 
* @param val Zahl der Pixel zu erhöhen, die Höhe der ComboBox. 
*/
public function set increaseH(val:Number):void { 
_increaseH = val; 
} 


/** 
* Überschreiben Sie die 'itemRenderer' setter-so können wir auch Ersatz für die ausgewählten 
* item-renderer. 
* 
* @param value Der renderer genutzt werden, um die Anzeige in der Dropdown-Liste Elemente 
* und das ausgewählte Element. 
*/
override public function set itemRenderer(Wert:IFactory):void { 
super.itemRenderer = Wert; 
replaceTextInput(); 
} 


/** 
* Überschreiben-base 'weist createChildren()' routine aufrufen, unsere " replaceTextInput()' 
* Methode zum ersetzen der standard ausgewählt Elementrenderer. 
* 
* @siehe #replaceTextInput(); 
*/
override protected function createChildren():void { 
super.die createChildren(); 
replaceTextInput(); 
} 


/** 
* Routine zum ersetzen der ComboBox 'textInput' Kind mit unserem eigenen Kind 
* das Rendern wird das ausgewählte Datenelement. Erstellt eine Instanz der 
* die "itemRenderer" set für dieses Kombinationsfeld. 
*/
geschützt Funktion replaceTextInput():void { 
if ( !textInputReplacement ) { 
if ( dies.itemRenderer != null && textInput != null ) { 
//entfernen die Standard-textInput 
removeChild(textInput); 

//erstellen Sie eine neue itemRenderer-Instanz, an die Stelle der Texteingabe 
textInputReplacement = diese.itemRenderer.newInstance(); 
//Hören für Klicks, so können wir öffnen/schließen des drop-down, wenn 
//renderer-Komponenten geklickt wird. 
textInputReplacement.addEventListener(MouseEvent.KLICKEN Sie auf, _onClick); 
//Hören Sie auf die Maus-Ereignisse auf unserer renderer so können wir füttern Sie zu 
//der ComboBox overlay-Taste. Dies wird sicherstellen, dass die button-skins 
//sind aktiviert. Sehen ComboBox::commitProperties () - code. 
textInputReplacement.addEventListener(MouseEvent.MOUSE_DOWN, _onMouseEvent); 
textInputReplacement.addEventListener(MouseEvent.MOUSE_UP, _onMouseEvent); 
textInputReplacement.addEventListener(MouseEvent.ROLL_OVER, _onMouseEvent); 
textInputReplacement.addEventListener(MouseEvent.ROLL_OUT, _onMouseEvent); 
textInputReplacement.addEventListener(KeyboardEvent.KEY_DOWN, _onMouseEvent); 

//Binden der Daten der textInputReplacement, um das ausgewählte Element 
BindingUtils.bindProperty(textInputReplacement, "Daten", this, "selectedItem", true); 

//Hinzufügen unserer renderer wie ein Kind. 
addChild(textInputReplacement); 

//Listen für öffnen, schließen, so können wir den Status beizubehalten. Die 
//'isShowingDropdown' - Eigenschaft ist mx_internal, so dass wir nicht 
//haben Zugang zu Ihr. 
diese.addEventListener(DropdownEvent.ÖFFNEN, _onOpen); 
diese.addEventListener(DropdownEvent.In der NÄHE, _onClose); 

//Speichern Sie einen Verweis auf die mx_internal Taste für die combo-box. 
//Wir benötigen diese, damit wir anrufen können, seine dispatchEvent () - Methode. 
for (var i:int = 0; i < dies.numChildren; i++) { 
var temp:Object = this.getChildAt(i); 
if (temp-Taste) { 
_buttonRef = temp-Taste; 
break; 
} 
} 
} 
} 
} 


/** 
* Erkennen von offenen Veranstaltungen auf den drop-down-Liste zu verfolgen, das aktuelle 
* drop-down-Zustand, so können wir angemessen reagieren, um eine klicken Sie auf unseren ausgewählten 
* item-renderer. 
* 
* @param event Die DropdownEvent.OPEN-Ereignis für das Kombinationsfeld. 
*/
geschützt Funktion _onOpen(event:DropdownEvent) : void { 
_isOpen = true; 
} 


/** 
* Erkennen, schließen Ereignisse, die auf den drop-down-Liste zu verfolgen, das aktuelle 
* drop-down-Zustand, so können wir angemessen reagieren, um eine klicken Sie auf unseren ausgewählten 
* item-renderer. 
* 
* @param event Die DropdownEvent.CLOSE-Ereignis für das Kombinationsfeld. 
*/
geschützt Funktion _onClose(event:DropdownEvent) : void { 
_isOpen = false; 
} 


/** 
* Wenn wir feststellen, dass ein Klick auf unsere renderer öffnen oder schließen des drop-down-Liste 
* basierend auf, ob die drop-down ist momentan geöffnet/geschlossen. 
* 
* @param event Das CLICK-Ereignis von unseren ausgewählten Element-renderer. 
*/
geschützt Funktion _onClick(event:MouseEvent) : void { 
wenn (_isOpen) { 
diese.close(event); 
} else { 
diese.open(); 
} 
} 


/** 
* Reagieren auf bestimmte Maus - /Tastatur-Ereignisse auf unsere ausgewählten Element-renderer und 
* übergeben Sie die Ereignisse der ComboBox 'button', so dass die skins sind richtig 
* angewendet. 
* 
* @param event Eine Maus oder ein Tastatur-Ereignis zu senden, um die ComboBox-Taste. 
* 
*/
geschützt Funktion _onMouseEvent(event:event) : void { 
wenn (_buttonRef != null) { 
_buttonRef.dispatchEvent(event); 
} 
} 
} //Ende Klasse 
} //end-Paket 

War ich auf der Suche nach einem Weg, dies zu tun, verwenden die Spark-ComboBox-Komponente.

Dieser thread war sehr nützlich für mich, aber bisher gab es nur Antworten, wie, es zu tun mit einer mx:ComboBox. Ich dachte, ich sollte anfügen, meine Antwort, wie es zu tun mit einer spark-ComboBox-Komponente.

1. Erstellen einer neuen skin der ComboBox
2. Ausblenden, und deaktivieren Sie die textInput -
3. Legen Sie Ihre eigene Komponente

Dies ist, was die Haut Aussehen würde:

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

Mit der Spark-ComboBox-Komponente in diesem Prozess ist sehr einfach und erfordert Sie nicht zu verlängern ComboBox.