Komponente für responsiven Toolbar Text

Diese Komponente soll es ermöglichen in einer Toolbar Text anzuzeigen, der sich dem zur Verfügung stehenden Platz anpasst. Sollte der Platz nicht ausreichen den gesamten Text anzuzeigen, so wird dieser abgeschnitten. Der gesamte Text wird zusätzlich als Tooltip angezeigt. Es kann auch zusätzlich ein Icon verwendet werden.

Die Komponenten ist für den Einsatz innerhalb einer Ext.toolbar.Toolbar ausgelegt. Die Verwendung in anderen Containern wird zwar nicht unterbunden, wird aber nicht empfohlen.

Konfiguration

Folgende Parameter können an der Komponente, zusätzlich zu den bestehenden Parameters der Ext.Component, konfiguriert werden.

text: (String) Anzuzeigender Text. Eine direkte Angabe von Language Keys ist möglich. Diese werden innerhalb der Komponente übersetzt.
iconCls: (String; optional) CSS-Icon-Klasse.
iconColorCls: (String, optional) CSS-Farb-Klasse
tooltip: (String, optional) Tooltip. Wird kein Tooltip explizit gesetzt, so wird der Text inkl. Icon verwendet.
minWidth: (integer, optional) Mindestbreite. Falls man eine Mindestbreite definieren möchte, kann man dies hiermit tun. Ist der Wert zu groß, so wird die Komponente weniger flexibel und nimmt mehr Platz in der Toolbar ein.

Beispiel

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: