From Learn About the Ext JavaScript Library

Iedereen die voor het eerst kennis maakt met Ext, of die er meer over wil weten is hier op de goede plek. In deze tutorial zullen we de basis concepten van Ext bespreken, en laten zien hoe u snel een dynamische pagina in elkaar kunt zetten. Wij gaan ervan uit dat u de enige ervaring hebt met Javascript, en de basis kent van het HTML document object model (DOM).

Contents 1 Download Ext 2 Laten we beginnen 3 Element: Het hart van Ext 4 Het selecteren van DOM nodes 5 Reageren op Events 6 Het gebruiken van Widgets 6.1 MessageBox 6.2 Grid 6.3 En nog veel meer... 7 Ajax gebruiken 7.1 PHP 7.2 ASP.Net 7.3 Cold Fusion 8 Wat is de volgende stap?

Download Ext

Als u dit nog niet gedaan heeft, dan wil u waarschijnlijk eerst de meest recente versie van de Ext library downloaden. Dit kan op: http://www.extjs.com/downloads/.

Er zijn verschillende versies die u kunt downloaden, maar u kunt het beste beginnen met de meest recente stabiele versie. Zodra u de library heeft gedownload en uitgepakt, dan is de examples map de beste plek om als eerste te verkennen.

Laten we beginnen

We gaan beginnen met zaken die u in Javascript vaak zult tegenkomen, en kijken hoe wij deze kunnen voltooien met de hulp van Ext. Als u gelijk wilt beginnen, dan raden wij u aan te beginnen met het downloaden van de starter files in IntroToExt.zip . Deze zullen we gebruiken om een pagina te maken die gebruik maakt van Ext. Het zip bestand bevat drie bestanden, namelijk: ExtStart.html, ExtStart.js en ExtStart.css. Pak alle drie de bestanden uit in een map direct onder de map waar Ext is geinstalleerd (bijvoorbeeld, als Ext is geinstalleerd in "C:\code\Ext\v1.0", maak dan dan een map aan in "C:\code\Ext\" genaamd "tutorial"). Dubbelklik op ExtStart.htm zodat hij wodt geopend in uw standaard web browser. Als u alles correct heeft gedaan, krijgt u nu een bericht te zien waarin staat dat alles goed is ingesteld. Als u een Javascript foutmelding krijgt, volg dan de instructies op de pagina om het werkend te krijgen.

Nu bent u klaar om ExtStart.js te open in u favoriete IDE of text editor, en deze door te nemen:

Ext.onReady(function() {
    alert("Congratulations!  You have Ext configured correctly!");
});
	

Ext.onReady is waarschijnlijk de eerste functie die u zult gebruiken op elke pagina die u maakt. Deze functie wordt automatisch uitgevoerd zodra de DOM volledig is geladen. Zo zorgt u ervoor dat elk element op de pagina beschikbaar is als u deze probeert op te halen in u scripts. U kunt de alert() regel nu weghalen zodat we kunnen beginnen met het schrijven van iets dat echt nuttig is!

Element: Het hart van Ext

Bijna alles dat u wilt doen in Javascript zal er op een gegeven moment voor zorgen dat u een specifiek element op de pagina wilt ophalen om er dingen mee te kunnen doen. Als u dit op de traditionele manier zou doen in Javascript, gebeurt dat door middel van het selecteren van de DOM node, gebruikmakend van zijn ID:

var myDiv = document.getElementById('myDiv');
	

Dit zal zonder enige twijfel werken, maar het object dat u terug krijgt (een DOM node), geeft u niet de mogelijkheden er op een makkelijke manier iets mee te doen. Als u iets nuttigs met het element wilt doen, zult u zelf veel code moeten schrijven om dit te bewerkstelligen. Ook is het uw verantwoordelijkheid om rekening te houden met alle verschillende manieren waarop de DOM nodes gebruikt moeten worden in de verschillende browsers. Dit zorgt vaak voor ingewikkelde problemen.

Open de documentatie van het Ext.Element object. Ext.Element is het hart van Ext omdat bijna alles dat u zult doen zal beginnen met het maken van een Element object, om er vervolgens acties mee uit te voeren. De API om Element is fundamenteel voor de hele Ext library, en als u de tijd neemt om daadwerkelijk een class van Ext goed te bestuderen, raden wij u echt aan te beginnen met Element.

De code om een Ext Element te creeren via zijn ID ziet er als volgt uit: (de starters pagina ExStart.htm bevat een div met een id "myDiv", dus u kunt gelijk beginnen de volgende code toe te voegen in ExtStart.js):

Ext.onReady(function() {
    var myDiv = Ext.get('myDiv');
});
	

Ok. Dus nu hebben we een Element object— wat is er zo interessant aan?

• Element geeft u de meeste DOM methods en eigenschappen (vanaf nu noemen we deze properties) die u nodig heeft. Dit alles zorgt voor een gemakkelijke, en cross-browser DOM interface (en u kunt nog steeds gemakkelijk toegang krijgen tot het onderliggende DOM element via Element.dom
• De Element.get() method zorgt voor interne caching, zodat als u meerdere keren hetzelfde element ophaalt, dit erg snel gaat.
• De meest voorkomende acties die u op een DOM node wilt uitvoeren zitten er ingebouwd, en werken in de verschillende browsers (toevoegen/verwijderen van CSS classes, toevoegen/verwijderen van event handlers, positionering, vergroten en verkleinen, animeren, drag/drop oftewel de mogelijk het element te laten verslepen door de gebruiker, etc.)

Dit betekent dat u heel veel verschillende dingen kunt doen, met weinig code. Hier zijn een paar voorbeelden (kijk in de Element API documentatie voor een complete lijst van alles dat u kunt doen). Ga uw gang en probeer sommige van deze functies uit, door de volgende code in ExtStart.js te plaatsen na de regel waar we het 'myDiv' Element hebben gemaakt:

myDiv.highlight();      // De achtergrond van het element zal worden gehighlight in het geel en langzaam terug
                           faden.
myDiv.addClass('red');  // Voeg een custom CSS class toe (gedefineerd in ExtStart.css)
myDiv.center();         // Centreer het element in de viewport.
myDiv.setOpacity(.25);  // Maak het element gedeeltelijk transparant.
	

Het selecteren van DOM nodes

Vaak is het erg onpraktisch of onmogelijk om een element te selecteren via zijn id. Misschien heeft hij geen id, of u weet niet wat zijn id is. Of er zijn teveel elementen om allemaal op te halen via hun id. Soms zult u DOM nodes willen selecteren via iets anders dan zijn id, zoals een attribuut of een CSS classnaam. Om deze reden, zit er een krachtige DOM selector library in Ext genaamd DomQuery.

DomQuery kan gebruikt worden als een aparte library, maar vaker zult u het in combinatie met Ext willen gebruiken om elementen te selecteren waar u vervolgens acties op uitvoert via het Element interface. Gelukkig ondersteund het Element object zelf manieren om elementen te selecteren via de Element.select method. Deze maakt intern gebruik van DomQuery om te element te selecteren. Als een simpel voorbeeld van hoe u dit kunt gebruiken, bevat het ExtStart.html bestand verschillende paragraph (<p>) tags. Deze hebben allemaal geen id. Als u al deze paragraph elementen op een gemakkelijke manier wilt ophalen om op allemaal tegelijk een actie uit te voeren, dan zou u dat als volgt kunnen doen:

// Highlight elk paragraph element.
Ext.select('p').highlight();
	

Dit voorbeeld demonsteert een handig aspect van Element.select—het geeft u een CompositeElement terug, die toegang geeft tot elk onderliggend Element object via de Element interface. Dit laat u gemakkelijk een actie uitvoeren op elke instantie van Element die is teruggegeven door Element.select, zonder door elk Element apart heen te loopen de actie erop uit te voeren.

DomQuery biedt een groot aantal opties, inclusief de meeste W3C CSS3 DOM selectors, standaard XPath, HTML attributen en nog veel meer. Kijk in de DomQuery API documentatie voor alle details van deze krachtige library.

Reageren op Events

Tot nu toe wordt in onze voorbeelden alle code die we hebben geschreven direct uitgevoerd in de onReady functie. Dit houdt in dat het direct wordt uitgevoerd nadat de pagina volledig is geladen. Dit geeft ons niet veel controle— vaak wilt u de code uitvoeren nadat een door uw gekozen specifieke actie of event heeft plaatsgevonden. Om dit te doen, moet u event handlers defineren, die reageren op events gebruikmakend van functies die u eraan koppelt.

Laten we beginnen met een simpel voorbeeld. Open ExtStart.js en pas het zo aan dat de code er als volgt uit ziet:

Ext.onReady(function() {
	Ext.get('myButton').on('click', function(){
		alert("You clicked the button");
	});
});
	

De code wordt nog steeds pas uitgevoerd nadat de pagina is geladen, maar er is een belangrijk verschil. De functie waarin de alert() staat is gedefineerd, maar wordt niet gelijk uitgevoerd—hij is toegekend als de "handler" van de button's click event. In normale woorden kan deze code worden uitgelegd als: "Haal een referentie naar het Element met het id 'myButton' op en defineer een functie die moet worden uitgevoerd zodra iemand op het Element klikt."

Het zal u niet helemaal verassen dat Element.select u toestaat hetzelfde te doen, maar dan voor een hele groep Element's tegelijk. Om bijvoorbeeld ons bericht te laten zien wanneer er op een van de paragraph elementen wordt geklikt, kunnen we het volgende doen:

Ext.onReady(function() {
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});
});
	

In deze twee voorbeelden is de functie die moet worden uitgevoerd als het event plaats vindt, op een simpele manier inline gedeclareerd, zonder de functie een naam te geven. Zo een type functie wordt ook wel een "anonymous function" genoemd omdat hij gedeclareerd is zonder een naam. U kunt natuurlijk ook een functie met en naam aan een event binden. Dit is vooral handig als u de functie wilt hergebruiken voor meerdere event. Bijvoorbeeld, de volgende code is functioneel precies hetzelfde als het vorige voorbeeld:

Ext.onReady(function() {
	var paragraphClicked = function() {
		alert("You clicked a paragraph");
	}
	Ext.select('p').on('click', paragraphClicked);
});
	

Tot dusver hebben we gekeken naar het uitvoeren van een functie nadat ons event heeft plaats gevonden, maar hoe weten we binnen de functie eigenlijk welk Element het event heeft laten plaats vinden? Dit blijkt erg makkelijk te zijn— de Element.on functie geeft drie extreem handige parameters mee aan de functie die het event afhandelt (wij zullen nu alleen kijken naar de eerste paremeter, maar wij raden u aan de API documentatie te verkennen om meer te leren over het afhandelen van events). In ons vorige voorbeeld negeerde onze functie deze parameters, maar met een simpele aanpassing kunnen we deze functionaliteit toepassen. De eerste, en meest belangrijke, parameter is het event dat heeft plaatsgevonden. Deze is eigenlijk een Ext event object, welke genormaliseerd is in voor browser en meer informatie over het event biedt dan het standaard browser event object. Bijvoorbeeld, het DOM element waarop het event heeft plaatsgevonden kan worden opgehaald met deze simpele toevoeging:

Ext.onReady(function() {
	var paragraphClicked = function(e) {
		Ext.get(e.target).highlight();
	}
	Ext.select('p').on('click', paragraphClicked);
});
	

Let hierbij op dat de target een DOM node is, dus we moeten eerst het corresponderende Element object ophalen voordat we een actie erop kunnen uitvoeren. In dit geval highlighten we het paragraph element.

Het gebruiken van Widgets

Naast de core javascript library waar we het over hebben gehad, heeft Ext ook een van de meest omvattende collectie van Javascript UI widgets die er op dit moment zijn. Er zijn er te veel om allemaal te beschrijven in deze introductie, maar laten we kijken naar een paar van de widgets die het vaakst gebruikt worden door de Ext gebruikers en hoe makkelijk ze te gebruiken zijn.

MessageBox

Laten we is iets anders doen dan een message box met de saaie tekst "Hello World". De code die we hebben geschreven in de vorige sectie highlight het parapraph element waarop geklikt is. Laten we deze code zo aanpassen dat het ook de tekst uit de aangeklikte paragraph in een message box laat zien. In de bovenstaande paragraphClicked functie, vervang de regel:

	Ext.get(e.target).highlight();
	

...met het volgende:

	var paragraph = Ext.get(e.target);
	paragraph.highlight();

	Ext.MessageBox.show({
		title: 'Paragraph Clicked',
		msg: paragraph.dom.innerHTML,
		width:400,
		buttons: Ext.MessageBox.OK,
		animEl: paragraph
	});
	

Er worden hier een paar concepten gebruikt die het waard zijn om over na te praten. In de eerste regel maken we nu een lokale variabele genaamd paragraph die een referentie bewaart naar het Element object dat bij de DOM node hoort waarop is geklikt (in dit geval weten we dat het altijd een paragraph element is omdat ons click event alleen geassocieert is met <p> tags). Waarom doen we dit? Nou, als we al iets vooruit kijken, weten we dat we een referentie naar dit Element object nodig hebben om het te highlighten, maar zullen hetzelfde Element object gebruiken voor sommige van onze MessageBox parameters. Over het algemeen is het een slechte gewoonte om dezelfde functie meerdere keren aan te roepen om dezelfde waarde (vanaf nu noemen we dit een value), of hetzelfde object, op te halen. Door de referentie naar het object toe te wijzen aan een lokale variabele, en deze te hergebruiken, gedragen we ons als bewuste en goede object-georienteerde programmeurs!

Laten we nu verder gaan met de aanroep van de MessageBox, die de andere eerder genoemde concepten laat zien die we gaan bespreken. Op het eerste gezicht ziet dit er misschien simpelweg uit als een lijst van parameters die worden meegegeven aan de functie. Maar als we nog eens goed kijken, wordt er gebruik gemaakt van een specifieke syntax. In dit geval wordt er namelijk maar één parameter aan MessageBox.show() meegegeven: een object literal die een collectie van meerdere properties en values bevat. In Javascript is een object literal een dynamisch object dat wordt aangemaakt, elke keer dat er { en } tekens om een lijst van name/value properties worden gezet. Het formaat van die properties is [naam van de property] : [value voor die property]. U zult zien dat dit patroon regelmatig wordt gebruikt in de gehele Ext library, dus het is van belang dat u deze syntax goed leert kennen!

Waarom gebruik maken van een object literal? De grootste rede is flexibiliteit. Properties kunnen worden toegevoegd of verwijderd op elk moment, en in elke willekeurige volgorde worden gedefineerd, terwijl de functie signature (het aantal en type parameters dat een functie verwacht) niet hoeft te veranderen. Het maakt het ook een stuk gemakkelijker voor de programmeur om een functie met erg veel parameters te gebruiken (in dit geval MessageBox.show). Laten we als voorbeeld een fictieve functie foo.action nemen die vier optionele parameters verwacht. Maar u wilt er maar een meegeven aan de functie. In dit geval kan uw code er als volgt uitzien: foo.action(null, null, null, 'hello'). Echter, als deze functie gebruik zou maken van een object literal, zou de code er als volgt uitzien: foo.action({ param4: 'hello' }); Naast het feit dat dit veel makkelijker te gebruiken is, is het ook een stuk beter leesbaar.

Grid

Het grid is een van de meest populaire widgets in Ext, en over het algemeen de eerste die gebruikers willen zien, dus laten we kijken hoe gemakkelijk is om een standaard grid te maken. Vervang alle bestaande code in ExtStart.js zodat het er als volgt uit ziet:

Ext.onReady(function() {
	var myData = [
		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
		['Ext',83.81,0.28,0.34,'9/12 12:00am'],
		['Google',71.72,0.02,0.03,'10/1 12:00am'],
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	];

	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({id: 0}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
		])
	});
	ds.load();

	var colModel = new Ext.grid.ColumnModel([
		{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
		{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
		{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
		{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
		{header: "Last Updated", width: 120, sortable: true, 
			renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
	]);

	var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
	grid.render();
	grid.getSelectionModel().selectFirstRow();
});
	

Terwijl dit er misschien uitziet als erg veel code, zijn het er in totaal eigenlijk maar zeven regels! De eerste regel maakt een array met data aan die moet worden weergegeven in het grid. In echte projecten zult u deze data waarschijnlijk uit een dynamische source willen halen. Denk hierbij bijvoorbeeld aan een database of web service. Hierna maken en laden we een "data store" welke aan de onderliggende Ext library verteld hoe hij de data moet inlezen en verwerken. Vervolgens defineren we ons "column model" die ons simpelweg de mogelijkheid geeft elke kolom in het grid apart te configureren. Als laatste maken we de grid widget aan, geven we de "data store" en ons "column model" mee, renderen we het grid en selecteren de eerste rij. Hoe gemakkelijk was dat? Als alles goed is gegaan zult u eindigen met iets wat erg op het volgende zal lijken:

Waarschijnlijk zijn er sommige details in deze code die u nog niet volledig begrijpt op dit moment (wat is bijvoorbeeld nou weer een MemoryProxy?). Het doel van dit voorbeeld is te laten zien hoe het mogelijk is om een dynamisch, visueel complex user interface component te maken met een paar regels code—het leren van de details kunt u beschouwen als een goede oefening. Er zijn veel resources die u kunt gebruiken om het grid beter te leren begrijpen, inclusief de Ext Grid Tutorial, de interactieve grid demo's en de grid API documentatie.

En nog veel meer...

We hebben hier alleen het puntje van de ijsberg gezien. Er zijn letterlijk tientallen UI widgets die u kunt gebruiken in Ext, waaronder automatische pagina layouts, tabs, menus, toolbars, dialogs, een tree view en nog veel meer. Bekijk de examples sectie van de API documentatie om een glimp om te vangen van alles wat er beschikbaar is.

Ajax gebruiken

Als u eenmaal een pagina heeft gemaakt en weet hoe u interactie ermee kunt hebben via Javascript, wilt u wellicht weten hoe u data kan versturen en ophalen van een remote server, meestal een database. Om dit asynchroon via Javascript te doen zonder de pagina compleet te herladen, is bekend als Ajax. Ext heeft uitstekende Ajax ondersteuning ingebouwd. Een veel voorkomend doel is om een interactie met een gebruiker te behandelen, iets asynchroon naar de server te sturen, om vervolgens een element in de UI te veranderen als antwoord aan de gebruiker. Hier is een voorbeeld van een simpel HTML formulier met daarin een veld voor het invullen van tekst, een button, en een div dat gebruikt wordt om een bericht te laten zien (Let op: u kunt deze code in ExtStart.html zetten als u dit uit wilt proberen, maar u zult toegang nodig hebben tot een web server om de server code uit te voeren):

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />
	

Vervolgens voegen we de Javascript toe die nodig is om onze data op te halen en te versturen naar het proces op de server (vervang alle bestaande code in ExtStart.js met het volgende):

Ext.onReady(function(){
	Ext.get('oKButton').on('click', function(){
		var msg = Ext.get("msg");
		msg.load({
			url: [server url], // <-- replace with your url
			params: "name=" + Ext.get('name').dom.value,
			text: "Updating..."
		});
		msg.show();
	});
});
	

We hopen dat het patroon er nu wat bekender uit begint te zien voor u. De code maakt van van het okButton element een Element object en koppelt er een anonieme functie aan die een klik van de gebruiker op de okButton afhandelt. Binnen de klik handler gebruiken we een speciale class ingebouwd in Ext genaamd de UpdateManager— deze class maakt het verzenden van een Ajax request, het ontvangen van de response en het updaten van een ander Element erg gemakkelijk. UpdateManager kan direct gebruikt worden of, zoals we het hier doen, bereikt worden via het Element dat we willen updaten (in dit geval de 'msg' div) door middel van de Element.load functie. Als Element.load functie wordt gebruikt, zal de innerHTML van het Element automatisch worden vervangen met de response van de server. Geef simpelweg de url naar het bestand op de server die de request zal afhandelen, de string met parameters die het bestand op de server nodig heeft (in dit geval geven we de value van het 'name' tekst veld) en de tekst die in het Element moet worden weergegeven terwijl de request afgehandeld wordt. Maak de msg div zichtbaar (deze begint als een onzichtbaar element) en dat is alles! Natuurlijk, zoals met de meeste dingen in Ext, worden er vele andere opties voor UpdateManager ondersteund, en zijn er meerdere manieren om Ajax requests af te handelen in verschillende situaties, maar hier laten we zien hoe makkelijk het is om een basis voorbeeld werkend te maken.

Het laatste gedeelte van de Ajax puzzel is het proces op de web server die daadwerkelijk de request afhandeld en een response terugstuurt naar de pagina. Dit proces kan een server pagina, een servlet, een HTTP handler, een webserver, of zelfs een Perl of CGI script zijn—eigenlijk alles dat op een webserver gedraait kan worden en een HTTP request kan afhandelen. Jammer genoeg, door de grote variatie is er geen manier om een standaard voorbeeld te laten zien dat al deze mogelijkheden behandelt. Hier zijn wat voorbeelden van veel voorkomende talen die u hopelijk in de juiste richting laten denken. (deze code echo'ed simpelweg wat er in het 'name' tekst veld is ingevuld met 'From Server: ' als voorvoegsel. dit is de tekst die in de 'msg' div zal worden weergeven):

PHP

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

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
	if (Request.Form["name"] != null)
	{
		Response.Write("From Server: " + Request.Form["name"]);
		Response.End();
	}
}

Cold Fusion

<cfif StructKeyExists(form, "name")>
	<cfoutput>From Server: #form.name#</cfoutput>
</cfif>

De echte uitdaging als er wordt gewerkt met Ajax processen, is het schrijven van de code die nodig is om de data op de server goed te verwerken en structureren. Er zijn verschillende formaten die worden gebruikt (meestal JSON of XML). Er zijn veel specifieke libraries beschikbaar voor de verschillende programmeertalen die goed samenwerken met Ext, omdat Ext geen specifieke eisen stelt aan de server. Zo lang het resultaat dat wordt teruggestuurd naar de pagina maar in het juiste data formaat is, maakt het Ext niet uit wat er op de server gebeurt! Een discussie over het verwerken van data die wordt verstuurd via Ajax ligt ver buiten het bereik van deze tutorial, dus als u gebruik gaat maken van Ajax raden wij u zeker aan om de Ext Ajax Tutorial te raadplegen.

Wat is de volgende stap?

Nu u een klein voorproefje heeft gehad van wat Ext is en wat het u kan bieden, zijn er vele resources beschikbaar die u helpen dieper de materie in te duiken: