Flex-Custom-Item-Renderer für das angezeigte Element in der Combobox

8

Ich verwende einen benutzerdefinierten Elementrenderer in einer Combobox, um eine benutzerdefinierte Zeichnung anstelle der Standardbeschriftung anzuzeigen.

Dies funktioniert gut für die Dropdown-Liste, aber das angezeigte Element (wenn die Liste geschlossen ist) ist immer noch die textliche Darstellung meines Objekts.

Gibt es eine Möglichkeit, das angezeigte Objekt auf die gleiche Weise wie das im Dropdown-Menü anzuzeigen?

    
pbreault 06.11.2008, 18:30
quelle

7 Antworten

9

Dies ist standardmäßig nicht möglich. Wenn Sie jedoch ComboBox erweitern, können Sie diese Funktionalität problemlos hinzufügen. Hier ist ein kurzes Beispiel, es ist eine grobe Version und muss wahrscheinlich getestet / optimiert werden, aber es zeigt, wie Sie dies erreichen können.

%Vor%     
Matt MacLean 11.11.2008, 13:23
quelle
5

Ich habe die obige Lösung versucht, aber festgestellt, dass das selectedItem nicht angezeigt wurde, als die Combobox geschlossen wurde. Eine zusätzliche Codezeile war erforderlich, um die itemRenderer-Dateneigenschaft an das selectedItem zu binden:

%Vor%     
Maurits de Boer 23.11.2009 09:42
quelle
3

Ich habe Dane's Code ein wenig erweitert. In einigen Fällen hat das Klicken auf die Drop-Box mit meinem Renderer nicht geöffnet und ich habe bemerkt, dass die normalen Flex ComboBox-Skins nicht ausgelöst wurden. Daher habe ich in replaceTextInput () einige zusätzliche Ereignis-Listener hinzugefügt und einen Verweis auf die ComboBox-Schaltfläche gespeichert, mit der die Skins angezeigt werden. Jetzt verhält es sich genau wie die normale ComboBox.

Hier ist der Code:

%Vor%     
John 26.07.2012 16:15
quelle
0

Danke Maclema und Maurits de Boer. Ich habe dieser Klasse noch ein paar Dinge hinzugefügt, um sie meinen Bedürfnissen anzupassen:

  • Ich habe den set itemRenderer überschrieben, so dass dies funktioniert, wenn Sie den itemRenderer über AS anstelle von mxml setzen. Ich habe den Ersatzcode für die Texteingabe in seine eigene Funktion verschoben, um Doppelungen zu vermeiden.

  • Ich habe Setter für 'anceW' und 'growthH' hinzugefügt, um die Größe der Combobox bei Bedarf zu ändern, weil mein Renderer zu groß für die Combobox war.

  • Ich habe 25 von der textInputReplacement-Breite subtrahiert, so dass es die Dropdown-Schaltfläche nicht überlappt. Vielleicht ist es besser, etwas Proportionales zu verwenden, um verschiedene Skins und ähnliches unterzubringen.

Code:

%Vor%     
Dane 15.03.2010 09:26
quelle
0

Ich suchte nach einer Möglichkeit, dies mit der Spark ComboBox zu tun.

Dieser Thread war sehr nützlich für mich, aber bisher gab es nur Antworten darauf, wie man es mit einer mx: ComboBox macht. Ich dachte, dass ich meine Antwort anfügen sollte, wie man es mit einer Funken ComboBox macht.

  1. Erstellen Sie eine neue Skin der ComboBox
  2. Verstecke und deaktiviere den textInput
  3. Fügen Sie Ihre eigene Komponente
  4. ein

So würde die Haut aussehen:

%Vor%

Mit der Spark ComboBox ist dieser Prozess sehr einfach und erfordert nicht, dass Sie ComboBox erweitern.

    
sixtyfootersdude 12.10.2011 18:13
quelle
0

Ich habe eine einfachere Möglichkeit gefunden, den Renderer für das ausgewählte Element zu ändern. Dies funktioniert nur, wenn Ihr Element von der Klasse TextInput in Flex 4.0 oder höher erbt.

In Flex v4.5, in ComboBase.createChildren in Zeile 1177, werden Sie feststellen, dass die für textInput definierbare Klasse mit dem Stilschlüssel textInputClass :

übergeben werden kann %Vor%

Ändern Sie einfach den Wert dieses Schlüssels im Konstruktor Ihrer Combo und Sie haben jetzt einen eigenen Renderer für das selectedItem .

%Vor%

Schließlich müssen Sie die Eigenschaft data an die Eigenschaft selectedItem in Ihrer Combo binden, um Daten anzuzeigen.

%Vor%     
Paulo Enmanuel 10.09.2015 20:53
quelle
-1

Dies kann viel einfacher erreicht werden, wenn Sie nur nach einem benutzerdefinierten Text mit CSS-Attributen suchen. Überschreiben Sie die Funktion "get selectedLabel (): String", um eine beliebige Zeichenfolge, die im Textfeld angezeigt werden soll, zurückzugeben. Wenn Sie irgendeine Art von CSS benötigen, dann legen Sie den Stil für Ihre textInput (this.textInput) in der selectedLabel () -Methode fest.

    
davidemm 27.09.2010 17:45
quelle