Bpc Icon Combo

Die Bpc Icon Combo stellt eine Combobox bereit, die pro Eintrag optional ein farbiges Icon und ebenfalls optional einen Tooltip anzeigt. Zusätzlich kann ein leerer Wert (value: "") mit einem eigenen Anzeige-Text versehen werden.

Verwendung

Für die Verwendung muss lediglich eine Komponente mit dem xtype bpcIconCombo erzeugt werden.

Verwendung mit Standard-Attributen

Ext.create({
xtype : "bpcIconCombo",
    store : [
        {
        label : "CORE_OK",
        value : "CORE_ERROR",
        color : "teal",
        icon : "x-fas fa-fire",
        tooltip: "CORE_OK"
        }
    ]
});

Verwendung mit Custom-Attributen

Ext.create({
    xtype : "bpcIconCombo",
    iconField : "myIcon",
    colorField : "myColor",
    displayField : "myLabel",
    valueField : "myValue",
    tooltipField : "myTooltip",
    preHtmlField : "myPreHtml",
    store :
        [
            {
            myLabel : "CORE_OK",
            myValue : "testValue",
            myColor : "teal",
            myIcon : "x-fas fa-fire",
            myTooltip: "CORE_OK",
            myPreHtml: "<hr>"
            }
        ]
    }
);

Leerer Wert mit emptyValueString (inkl. emptyText)

Wenn ein leerer Eintrag ausgewählt ist (value: ""), kann ein eigener Text angezeigt werden. Falls kein emptyText gesetzt ist, wird er automatisch aus emptyValueString übernommen.

Ext.create({
    xtype : "bpcIconCombo",
    emptyValueString : "MONITOR_NO_VIEW_STATES_SELECTED",
    // Übersetzungs-Key oder Text
    // emptyText wird automatisch aus emptyValueString gesetzt, wenn nicht explizit angegeben
    store :
        [
        { label: "—", value: "" }, // spezieller „leer“-Eintrag
        { label: "CORE_DEBUG", value: "DEBUG", icon: "x-fal fa-info-circle", color: "#D49A6A" }
        ]
    }
);

Datenstruktur

Jeder Store-Datensatz kann (abhängig von den konfigurierten Feldnamen) folgende Felder enthalten:

label – Anzeigetext (Standard für displayField)

value – Wert (Standard für valueField)

icon – Icon-CSS-Klasse, z. B. x-fal fa-level-up (Standard für iconField)

color – CSS-Farbe, z. B. #4CAF50 oder red (Standard für colorField)

tooltip – Tooltip-Text/Key (Standard für tooltipField)

preHtml – Optionales HTML, das vor Icon und Label eingefügt wird (Standard für preHtmlField)

Tooltip und Label werden über BpcCommon.Api.getTranslation(…) übersetzbar gemacht.

Konfiguration

Die wichtigsten Konfigurationsoptionen (mit Defaults):

displayField: String – Feldname für den Anzeigetext, Standard: "label".
valueField: String – Feldname für den Wert, Standard: "value".
iconField: String – Feldname für die Icon-Klasse, Standard: "icon".
colorField: String – Feldname für die Farbe, Standard: "color".
tooltipField: String – Feldname für den Tooltip, Standard: "tooltip".
preHtmlField: String – Feldname für zusätzliches HTML vor Icon/Label, Standard: "preHtml".
emptyValueString: String – Text/Übersetzungs-Key für die Anzeige, wenn der gewählte Datensatz value: "" hat. Standard: "".
emptyText: String – Platzhalter, wenn kein Wert gesetzt ist. Wird automatisch aus emptyValueString übernommen, falls nicht explizit angegeben.
queryMode: String – "local" (Default).
forceSelection: Boolean – true (nur Werte aus dem Store sind zulässig).
store: Array/Store – Standard: [].

Rendering-Details

Dropdown-Liste: Icon + Label werden per XTemplate zusammengesetzt. Das Icon wird als <span class="…"> mit style="color: …; font-size: 18px; margin-right: 3px" gerendert. Label und Tooltip werden übersetzt; Icon-Klassen stammen z. B. aus Font Awesome.

Ausgewählter Wert (Feldanzeige): Die Anzeige im Eingabefeld basiert auf displayTpl. HTML-Tags im Label werden entfernt (Plain-Text), um eine saubere Feldanzeige sicherzustellen. Für den speziellen leeren Wert (value: "") wird emptyValueString angezeigt.

Das Eingabefeld selbst rendert standardmäßig kein HTML. HTML (z. B. <span class='x-fal fa-info-circle' …> DEBUG) erscheint daher in der Feldanzeige als Text. In der Dropdown-Liste wird HTML korrekt dargestellt.

Keywords: