Component for responsive toolbar text

This component should make it possible to display text in a toolbar that adapts to the available space. If there is not enough space to display the entire text, it is cut off. The entire text is also displayed as a tooltip. An icon can also be used in addition.

The components are designed for use within a Ext.toolbar.Toolbar. Although use in other containers is not prevented, it is not recommended.

Configuration

The following parameters can be configured on the component in addition to the existing parameters of Ext.Component.

text: (String) Text to be displayed. A direct specification of language keys is possible. These are translated within the component.
iconCls: (String; optional) CSS icon class.
iconColorCls: (String, optional) CSS color class
tooltip: (String, optional) Tooltip. If no tooltip is explicitly set, the text including the icon is used.
minWidth: (integer, optional) Minimum width. If you want to define a minimum width, you can do this here. If the value is too large, the component becomes less flexible and takes up more space in the toolbar.

Example

Ext.create("Ext.window.Window", {
    title: "ToolbarMsg",
    items: [
        {
            html: "look at my toolbar"
        }
    ],
    buttons: [
        {
            xtype        : "bpcToolbarMsg",
            iconCls      : BpcCommon.Icons.WARNING,
            iconColorCls : "warningColor",
            text         : "CORE_UNSAVED_CHANGES",
        },
        {
            text: "Button"
        }
    ]
}).show();

Keywords: