Entwicklung & Design

Rich-Client-Anwendungen mit ExtJs: Bitte recht komfortabel

Seite 3 / 5

JAVASCRIPT
<script type='text/javascript'>
var dh = Ext.DomHelper;
var list = dh.append('my-menu', {
	id: 'my-menu', tag: 'ul', cls: 'menu', children: [
		{tag: 'li', id: 'item0', html: 'Eintrag 1'},
		{tag: 'li', id: 'item1', html: 'Eintrag 2'},
		{tag: 'li', id: 'item2', html: 'Eintrag 3'}
	]
});
</script>
...
<div id='my-menu'></div>

Listing 4

AJAX

Kaum eine neu implementierte Webanwendung arbeitet heute noch ohne AJAX. Aus dem Hype der letzten Jahre wurde ein solides Mittel, um Webapplikationen benutzerfreundlicher zu gestalten. Auch ExtJs nutzt AJAX an vielen Stellen, um Daten vom Server an den Client oder zum Speichern an den Server zu übertragen.

ExtJs kann mit mehreren Übertragungsformaten für AJAX-Anfragen umgehen. Am besten in das Framework integriert ist das JSON-Format, das vor allem für die erweiterten Widgets wie Grids oder Trees zum Einsatz kommt. Die Listings 5 und 6 zeigen, wie clientseitig eine einfache AJAX-Anfrage an den Server abgesetzt werden kann.

HTML
<div id="msg"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />

Listing 5

JAVASCRIPT
Ext.onReady(function(){
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get('msg');
		msg.load({
			url: [server url], // Hier steht die Server-URL
			params: 'name=' + Ext.get('name').dom.value,
			text: 'Updating...'
		});
		msg.show();
	});
});

Listing 6

Die Verarbeitung auf dem Server ist selbstverständlich abhängig von der gewählten Server-Programmiersprache. Das in Listing 7 aufgeführte Beispiel ist in PHP geschrieben.

PHP
<?php if(isset($_POST['name'])) {
		echo 'From Server: '.$_POST['name'];
	}
?>

Listing 7

Layouts

Verglichen mit Desktop-Anwendungen sind HTML-Seiten relativ starre Gebilde. Selbst in Zeiten von CSS2 bestehen sie oft aus Bereichen mit festen Größen, während man in Desktop-Anwendungen einzelne Bereiche in der Regel an eigene Anforderungen anpassen kann. ExtJs macht solche Anpassungen möglich. Die folgende Abbildung zeigt ein Beispiel für eine ExtJs-Benutzeroberfläche, die mit einem so genannten Border-Layout zum „Wegklappen“ einzelner Bereiche arbeitet.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!