BPC Icon Combo

The BPC Icon Combo provides a combo box that optionally displays a colored icon and, also optionally, a tooltip for each entry. Additionally, an empty value (value: "") can be assigned its own display text.

Usage

To use it, simply create a component with the xtype bpcIconCombo.

Usage with Standard Attributes

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

Usage with Custom Attributes

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>"
            }
        ]
    }
);

Empty Value with emptyValueString (including emptyText)

If an empty entry is selected (value: ""), custom text can be displayed. If no emptyText is set, it is automatically taken from emptyValueString.

Ext.create({
    xtype : "bpcIconCombo",
    emptyValueString : "MONITOR_NO_VIEW_STATES_SELECTED",
    // Translation key or text
    // emptyText is automatically set to emptyValueString if not explicitly specified
    store :
        [
        { Label: "—", value: "" }, // special “empty” entry
        { Label: "CORE_DEBUG", value: "DEBUG", icon: "x-fal fa-info-circle", color: "#D49A6A" }
        ]
    }
);

Data Structure

Each store record can contain the following fields (depending on the configured field names):

Label – Display text (default for displayField)

value – Value (default for valueField)

icon – Icon CSS class, e.g., x-fal fa-level-up (default for iconField)

color – CSS color, e.g., #4CAF50 or red (default for colorField)

tooltip – Tooltip text/key (default for tooltipField)

preHtml – Optional HTML inserted before the icon and label (default for preHtmlField)

Tooltips and Labels are made translatable via BpcCommon.Api.getTranslation(…) are made translatable.

Configuration

The most important configuration options (with defaults):

displayField: String – Field name for the display text, default: "label".
valueField: String – Field name for the value, default: "value".
iconField: String – Field name for the icon class, default: "icon".
colorField: String – Field name for the color, default: "color".
tooltipField: String – Field name for the tooltip, default: "tooltip".
preHtmlField: String – Field name for additional HTML before the icon/Label; default: "preHtml".
emptyValueString: String – Text/translation key to display when the selected record has value: "". Default: "".
emptyText: String – Placeholder when no value is set. Is automatically taken from emptyValueString if not explicitly specified.
queryMode: String – "local" (default).
forceSelection: Boolean – true (only values from the store are allowed).
store: Array/Store – Default: [].

Rendering Details

Dropdown list: Icon + Label are composed using XTemplate. The icon is rendered as <span class="…"> with style="color: …; font-size: 18px; margin-right: 3px". The label and tooltip are translated; icon classes come from Font Awesome, for example.

Selected value (field display): The display in the input field is based on displayTpl. HTML tags in the label are removed (plain text) to ensure a clean field display. For the specific empty value (value: ""), emptyValueString is displayed.

By default, the input field itself does not render HTML. HTML (e.g., <span class='x-fal fa-info-circle' …> DEBUG) therefore appears as text in the field display. HTML is rendered correctly in the dropdown list.

Keywords: