dynamicinternet Wir machen Ihr Web dynamisch!

Ext Tree Basics

geschrieben von Micha am 16. Mai 2007 | 23 Kommentare

Heute wollen wir uns das Tree Widget der Ext Library anschauen und die Grundlagen der Erzeugung eines Trees lernen.

Voraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

Dieses Tutorial basiert auf der Version Ext-1.0, die aktuelle Version kann hier heruntergeladen werden.

Vorbereitungen

Wir benötigen für dieses Tutorial eine leere HTML Datei, die wir basic-tree.html nennen und eine Javascript Datei, basic-tree.js. Legt beide Dateien in einem extra Verzeichnis an.

In die HTML Datei binden wir in der richtigen Reihenfolge die erforderlichen Ext Source Dateien ein und natürlich unser basic-tree.js.

 

<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css" mce_href="../ext-1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js" mce_src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js" mce_src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all.js" mce_src="../ext-1.0/ext-all.js"></script>
<script type="text/javascript" src="basic-tree.js" mce_src="basic-tree.js"></script> 

In die basic-tree.js schreiben wir unsere bekannte Ext.onReady Funktion, die bei korrekter Einbindung der Ext Dateien eine MessageBox aufruft.

 

Ext.onReady(function(){
	Ext.MessageBox.alert('Hallo', 'Ext is now ready for your first tree!');
}); 

Der Tree braucht natürlich einen Container, in dem er dargestellt werden soll. Dazu erzeugen wir ein Div Element in unserer HTML Datei:

 

<div id="tree-div" style="width:300px; height:300px; border:2px solid #B2D0F7;"></div> 

Wenn soweit alles geklappt hat, löschen wir noch die Ext.MessageBox.alert Zeile und sind bereit für unseren ersten Tree.

Ein statischer Tree

Um erst eimal die Basics zu lernen, wollen wir einen statischen Tree mit ein paar Musikern bauen und uns dann anschauen, wie wir den Tree erweitern können.
Wir müssen zuerst die Ext.BLANK_IMAGE_URL definieren. Das ist die Url zu einen 1×1 transparenten Gif, welches als Platzhalter für die Inline Icons des Trees dient. Der Default Wert ist “http://extjs.com/s.gif”.
Die QuickTips schalten wir auch gleich ein.

 

Ext.BLANK_IMAGE_URL = "http://localhost/DeinPfadzur/ext-1.0/resources/images/default/s.gif";
Ext.QuickTips.init(); 

Ok, nun zu unserem Tree. Wir erzeugen eine Instanz der Ext Tree Klasse. Danach brauchen wir ein TreePanel, welches sich in dem tree-div befinden soll. Das TreePanel nutzt den TreeLoader, welcher die Daten für den Tree läd. In unserem Fall sind das statische Daten, es können auch Daten von einer Url geladen werden.

 

var Tree = Ext.tree; 

var myTree = new Tree.TreePanel('tree-div', {
	loader: new Tree.TreeLoader(),
	containerScroll: true,
	animate:true,
	rootVisible:true
}); 

Wir setzen rootVisible auf true, damit wird das oberste Root Node sichtbar. Ihr könnt es auch auf false setzen, je nach Anforderung.
Nun zum eigentlichen Tree:

 

var Rroot = new Tree.AsyncTreeNode({
	text: 'Rockstars',
	id:'rockstars',
	allowDrag:false,
	allowDrop:false,
	children: [
		{text: 'Pink Floyd', id:'rock-1',  children: [
			{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
			{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
			{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
		]},
		{text: 'Rolling Stones', id:'rock-2', children: [
			{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
			{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
			{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
			{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
		]},
		{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
		{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true},
	]
});
myTree.setRootNode(Rroot);
myTree.render(); 

Wir haben mit Rroot ein Root Node erzeugt und unsere Rockstars einfach als Child Nodes drangehängt. Wenn ein Node weitere Children (Kinder hat, bekommt es automatisch das Foldericon zugewiesen. Hat ein Node keine Kindelemente mehr, setzt man leaf auf true.
Bei den Musikern von Pink Floyd habe ich zusätzlich qtips definiert, um euch dieses Feature ebenfalls zu zeigen. Fahrt einfach mit der Maus über David Gilmour und es wird “Gitarre, Gesang” als Tooltip angezeigt. Man kann damit wichtige Informationen über das jeweilige Node anzeigen, zB. eine Dateigröße. Mit allowDelete:true erlauben wir das Löschen der Nodes, dazu später.
Euer Tree sollte nun so aussehen:

Wenn ihr möchtet, das alle Tree Nodes sofort aufgeklappt sind, fügt nach myTree.render(); die Zeile

 

myTree.expandAll(); 

ein. Drag and Drop haben wir erst einmal nicht erlaubt (allowDrag:false, allowDrop:false), das ist eine andere Baustelle .

Wir wollen uns nun bei einem Klick auf ein Node die ID anzeigen lassen. Dazu schreiben wir eine kleine Funktion, in der wir uns das SelectionModel holen und schauen, ob ein Node selektiert ist.

myTree.on('click', alertID); 

function alertID(node){
	if(myTree.getSelectionModel().isSelected(node)){
		alert('Die Node-ID ist ' + node.id);
	}
}; 

Oft ist es wichtig zu schauen, ob ein Node das letzte Kind (leaf:true) ist, um zB. nur dafür Drag and Drop zuzulassen. Also passen wir die Funktion noch ein bischen an:

 

function alertID(node){
	if(myTree.getSelectionModel().isSelected(node)){
		if (node.isLeaf()){
			alert('Die Node-ID ist ' + node.id + ' leaf: true');
		} else {
			alert('Die Node-ID ist ' + node.id + ' leaf: false');
		}
	}
}; 

Jetzt gibts ein bischen mehr Arbeit. Wir wollen dem Tree ein Contextmenü geben, welches bei Rechtsklick auf ein Node verfügbar ist. Das Menü soll uns erlauben, den Tree auf- und zuzuklappen und ein erlaubtes Node zu löschen.

Dazu brauchen wir natürlich ein Menü und 4 Funktionen. Das Menü:

 

var Menu = new Ext.menu.Menu({
	id:'menu',
	items: [{
		id:'expand',
		handler:expandAll,
		cls:'expand',
		text:'ausklappen'
	},{
		id:'collapse',
		handler:collapseAll,
		cls:'collapse',
		text:'einklappen'
	},'-',{
		id:'remove',
		handler:removeNode,
		cls:'remove',
		text: 'löschen'
	}]
}); 

Die Handler sind die Funktionen, die wir nun erstellen werden. Mit cls kann man eigene CSS Klassen erstellen, um dem Menü ein eigenes Aussehen zu geben oder spezielle Icons zu benutzen. Hier die Funktionen:

 

var sm = myTree.getSelectionModel(); 

function prepareMenu(node, e){
	node.select();
	Menu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
	Menu.showAt(e.getXY());
}
function collapseAll(){
	Menu.hide();
	setTimeout(function(){
		Rroot.eachChild(function(n){
			n.collapse(false, false);
		});
	}, 10);
}
function expandAll(){
	Menu.hide();
	setTimeout(function(){
		Rroot.eachChild(function(n){
			n.expand(false, false);
		});
	}, 10);
}
function removeNode(){
	var n = sm.getSelectedNode();
	if(n && n.attributes.allowDelete){
		myTree.getSelectionModel().selectPrevious();
		n.parentNode.removeChild(n);
	}
} 

Damit das auch wirklich funktioniert, müssen wir dem Tree mitteilen, was er bei dem contextmenu-Event machen soll:

 

myTree.on('contextmenu', prepareMenu); 

Für unser Context Menü definieren wir zum Schluß noch die CCS Klassen in der HTML Seite:

 

.expand .x-menu-item-icon {
	background-image:url(../PfadZur/ext-1.0/examples/shared/icons/arrow-down.gif);
}
.collapse .x-menu-item-icon {
	background-image:url(../PfadZur/ext-1.0/examples/shared/icons/arrow-up.gif);
}
.remove .x-menu-item-icon {
	background-image:url(../PfadZur/ext-1.0/examples/shared/icons/fam/delete.gif);
} 

Falls jemand nicht richtig mitgekommen ist, hier noch mal der komplette Javascript Code:

 

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "http://localhost/DeinPfadzur/ext-1.0/resources/images/default/s.gif";
	Ext.QuickTips.init();
	var Tree = Ext.tree; 

	var myTree = new Tree.TreePanel('tree-div', {
		loader: new Tree.TreeLoader(),
		containerScroll: true,
		animate:true,
		rootVisible:true
	}); 

	var Rroot = new Tree.AsyncTreeNode({
		text: 'Rockstars',
		id:'rockstars',
		allowDrag:false,
		allowDrop:false,
		children: [
			{text: 'Pink Floyd', id:'rock-1',  children: [
				{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
				{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
				{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
			]},
			{text: 'Rolling Stones', id:'rock-2', children: [
				{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
				{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
				{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
				{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
			]},
			{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
			{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
		]
	});
	myTree.setRootNode(Rroot);
	myTree.render();
	myTree.expandAll();
	myTree.on('click', alertID);
	myTree.on('contextmenu', prepareMenu); 

	var sm = myTree.getSelectionModel(); 

	function alertID(node){
		if(myTree.getSelectionModel().isSelected(node)){
			if (node.isLeaf()){
				alert('Die Node-ID ist ' + node.id + ' leaf: true');
			} else {
				alert('Die Node-ID ist ' + node.id + ' leaf: false');
			}
		}
	};
	var Menu = new Ext.menu.Menu({
		id:'menu',
		items: [{
			id:'expand',
			handler:expandAll,
			cls:'expand',
			text:'ausklappen'
		},{
			id:'collapse',
			handler:collapseAll,
			cls:'collapse',
			text:'einklappen'
		},'-',{
		id:'remove',
		handler:removeNode,
		cls:'remove',
		text: 'löschen'
		}]
	});
	function prepareMenu(node, e){
		node.select();
		Menu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
		Menu.showAt(e.getXY());
	}
	function collapseAll(){
		Menu.hide();
		setTimeout(function(){
			Rroot.eachChild(function(n){
				n.collapse(false, false);
			});
		}, 10);
	}
	function expandAll(){
		Menu.hide();
		setTimeout(function(){
			Rroot.eachChild(function(n){
				n.expand(false, false);
			});
		}, 10);
	}
	function removeNode(){
		var n = sm.getSelectedNode();
		if(n && n.attributes.allowDelete){
			myTree.getSelectionModel().selectPrevious();
			n.parentNode.removeChild(n);
		}
	}
}); 

Den fertigen Tree. könnt ihr euch hier anschauen.