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 |
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();