Widgets – Die neue Komponente in Ext JS 5
Kommentare

Widgets sind nützliche Ergänzungen für jede Website, mit denen sich zum Beispiel Bewertungsmöglichkeiten hinzufügen lassen. Seit Ext JS 5 unterstützt das Framework mit Widgetcolumn-Komponenten in

Widgets sind nützliche Ergänzungen für jede Website, mit denen sich zum Beispiel Bewertungsmöglichkeiten hinzufügen lassen. Seit Ext JS 5 unterstützt das Framework mit Widgetcolumn-Komponenten in Grid-Zellen; gleichzeitig wurde mit Ext JS 5 die neue Widget-Komponente eingeführt. Neben den bereits im Framework enthaltenen Widgets ist das Erstellen eigener Widgets auch nicht schwierig. Don Griffin erklärt im Sencha-Blog, wie es funktioniert.

Widgets mit Ext.Widget erstellen

Im Gegensatz zu normalen Komponenten werden Widgets von Ext.Widget abgeleitet. Die von Ext.Widget abgeleiteten Klassen werden einerseits fast vollständig vom Config-System definiert, andererseits definieren sie auch, wie DOM-Elemente produziert und DOM-Events an Methoden gebunden sind.

Um ein Widget zu erstellen, muss zunächst sein DOM-Tree definiert werden, indem das Element-Property spezifiziert wird, etwa als Reference– oder Listeners-Property. So werden alle Elemente mit einem Reference-Property mit dem Wert des Properties in der Widget-Instanz gecached.

Ext.Widget definiert sein Verhalten durch das zur Verfügung stellen von Config-Properties, deren Technik mit Ext JS 5 besser geordnet ist. Das Config-System initialisiert das Config-Objekt der ersten Instanz der Klasse, sodass die ursprünglich mit den Element-Spezifikationen erstellten Dom-Elemente ein Update bekommen, bis Ext.Widget den Dom-Tree klonen kann. Für weitere Instanzen der gleichen Widget-Klasse verwendet Ext.Widget diesen Klon, um den neuen Widget-Dom-Tree zu produzieren.

Wird ein Widget in einer Widgetcolumn genutzt, werden weniger Widget-Instanzen gerendert und diese wiederverwendet, wenn eine Reihe hinter den Scrolling-Bereich verschoben wird.

Dies ist natürlich nur ein erster Einblick in die Verwendung von Widgets in Ext JS 5. Don Griffing erläutert sehr ausführlich und mit Code-Beispielen, wie sich eigene Widgets erstellen lassen. In jedem Fall bieten Widgets die gleichen Einsatzmöglichkeiten wie normale Komponenten, sind aber in vielerlei Hinsicht einfacher zu schreiben – insbesondere, wenn das Layout nur in CSS bearbeitet werden kann.

Aufmacherbild: Closeup of businessman making a structure with wooden cubes. Building a business concept. von Shutterstock / Urheberrecht: Gajus

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -