Viewport Switch mit ExtJs
05. Januar 2009Ein Viewport ist in dem Javascript Framework ExtJs ein Conatiner für die Panels und Grid. Dieser Viewport füllt die ganze Seite aus und scaliert bei Änderungen des Browser die Größe mit. Für eine typische Webanwendung wird das “Border” Layout verwendet. In diesem Border Layout kann man die Regionen south, east, north, west, und center definieren.
In meinen letzten ExtJS Projekt war die Anwendung etwas umfangreicher so das verschiedene Viewports verwendet wurden um die verschiedenen Bereiche abzutrennen. Dazu wurde immer die komplette Seite neu geladen. Bei der Masse an JavaScript Dateien hat sich dieser Switch mit Reload als unangenehm erwiesen. Deshalb habe ich nach einer Möglichkeit gesucht den Viewport zu Laufzeit auszutauschen.
Der logische Weg mittels “destroy” den alten Viewport zu zerstören und einfach einen neuen zu erzeugen, funktionierte leider nicht, da der Viewport zu stark in den DOM Baum verankert ist.
Nach einigem Suchen wurde mir klar das die Regionen einens Viewports nicht mehr änderbar sind sobald sie erzeugt wurden. Man kann nur dessen Inhalt (items) entfernen und dann neue Elemente hinzufügen.
Um die Elemente einer Region zu entfernen habe ich folgende Funktion an mein Viewport ergänzt:
/**
* Remove all Items from a Region
* @param string region
*/
removeAllItems:function(region){
this._tempcmp = Ext.getCmp(region);
var mixedCollection = this._tempcmp.items;
mixedCollection.each(function(item,index,length){
this._tempcmp.remove(item);
},this);
},
Nach dem ich die Region geleert habe hole ich mir die Region mit Ext.getCmp() und füge mit der add Methode die neuen Items hinzu.
Ganz am Ende muss ich noch die doLayout() Methode des Viewports aufrufen damit die neuen Elemente neu gerendert werden.
Wenn man die Code richtig aufbaut kommt man bei dieser Methode auch ohne doppelten Code aus.
Tags: Javascript