Component for Responsive Toolbar Text

This component is designed to display text in a toolbar that adapts to the available space. If there isn’t enough space to display the entire text, it will be truncated. The entire text is also displayed as a tooltip. An icon can also be used.

The component is designed for use within a Ext.toolbar.Toolbar. While use in other containers is not prevented, it is not recommended.

Configuration

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

text: (String) Text to be displayed. Language keys can be specified directly. 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 so 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: