Jozef Sakalos beschreibt in seinem Beitrag Writing_a_Big_Application_in_Ext wie man durch Erweiterung der GUI Klassen von Ext JS zu sauber gekapselten Komponenten kommt. Leider bin zumindest ich noch nicht dahinter gekommen, was genau man zu welchem Zeitpunkt machen darf - und die JS Fehlermeldungen irgendwo in der ext-all.js sind da nicht wirklich hilfreich.

Hier ein funktionierendes Beispiel für den Tree. Wie einfach zu erkennen, wird fast alles über die Konfig-Optionen gesetzt - bis auf die Root-Node des Trees. Diese kann nicht über Optionen und auch nicht in der initComponent Funktion gesetzt werden. Vielleicht spart es dem ein oder anderen, ein paar Minuten suchen


/**
* Logviewer tree panel
* TreePanel für die Auswahl der anzuzeigenden Section
*
* @author christoph.luetjen
*/
Logviewer.TreePanel = Ext.extend(Ext.tree.TreePanel, {
region: 'west',
animate: true,
title: 'Logdatei',
split: true,
width: 225,
minSize: 175,
maxSize: 400,
useArrows: true,
autoScroll: true,
rootVisible: false,
collapsible: true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'http://acbase.chris.intra/htdocs/logviewer/sections'
}),

/**
* Set root node
* Scheinbar kann man die nicht innerhalb von initComponent
* setzen. Daher beim Rendern.
*
*/
onRender: function(){
var root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable: false
});
this.setRootNode(root);

Logviewer.TreePanel.superclass.onRender.apply(this, arguments);
}
});