Regions as tabs using ExtJS... (Regionen als Tabs anzeigen mit ExtJS)

Title: Regions as tabs using ExtJS...

I'm working on an ExtJS-Theme right now. One of the first features i wanted to integrate was to show regions as tabs, but i wanted it to be defined only by the position of the region and its template. To do that i created the following region template.

Ich arbeite momentan an einem ExtJS-Theme. Eine der ersten Funktionalitäten, die ich hierbei vorgesehen habe, ist das anzeigen von Regionen als Tabs. Dabei möchte ich keine großartigen Einstellungen in den einzelnen Regionen selbst vornehmen, sondern nur über die Positionierung definieren, welche Regionen als Tab angezeigt werden. Hierfür hab ich zunächst ein Regionstemplate wie folgt angelegt.

The attribute class=”x-tab” marks the regions that should be displayed as tabs. The title attribute defines the name of the tab (title=”#TITLE#”). Now we have to change a few things in our page template. For my little example i want all regions in the BOX_BODY area to be displayed as tabs, so i place the #BOX_BODY# inside a div-tag.

Das Attribut class=”x-tab” kennzeichnet die umzuwandelnden Regionen. Als Tabbezeichnung wird der Titel der Region angezeigt (title=”#TITLE#”). Als nächstes sind ein paar Änderungen am Seitentemplate notwendig. Für mein kleines Beispiel möchte ich, das alle Regionen im BOX_BODY als Tabs angezeigt werden. Dazu schließe ich diesen in eine benannte DIV-Region ein.

#BOX_BODY#

Next thing to do is to put the following javascript inside the page-template too. It uses the autoTabs-Option of ExtJS, which creates tabs based on existing markup.

Nun nutze ich die autoTabs-Option von ExtJS, um die vorhandenen Regionen im BOX_BODY automatisch in Tabs umzuwandeln. Dazu folgendes Skript ebenfalls ins Seitentemplate kopieren.

In this script two parameters are important. First one is the “autoTabs:true”, which triggers the ExtJS feature we're using to replace our normal regions with tab-regions. Second one is “applyTo: ‘box_body’”, which defines the div-region this feature should be used on. Now we are ready to display regions as tabs by setting our created region template and positioning the region inside the BOX_BODY.

Wichtig hierbei sind die Parameter “autoTabs:true” und “applyTo: ‘box_body’”, die angeben auf welchen Bereich die autoTab-Funktion angewendet werden soll. Nun genügt es beim Erstellen einer neuen Region das neue Regionstemplate anzugeben und die Region im BOX_BODY zu platzieren.

The result should look something like this.

Das Ergebnis sollte etwa so aussehen.

By the way, the usual conditions to show or hide the regions still work.

Übrigens funktioniert das bedingte ein- und ausblenden der Regionen immer noch.