Share
Hé jongens, Levi Hackwith hier. Vandaag bespreken we versie vier van het JavaScript-framework, ExtJS. We gaan bespreken wat het is, hoe het te installeren, en dan gaan we pronken met de kracht van ExtJS door een robuust gegevensraster samen te stellen met behulp van enkele voorbeeldgegevens die ik heb samengesteld.
Deze tutorial bevat een screencast die beschikbaar is voor leden van Tuts + Premium.
Dus laten we beginnen door erover na te gaan wat ExtJS eigenlijk is. ExtJS, ontwikkeld door een bedrijf genaamd Sencha, is een JavaScript-framework dat specifiek is ontworpen voor het bouwen van webapplicaties. Het belangrijkste verschil tussen een JavaScript-framework zoals ExtJS en een JavaScript-bibliotheek zoals jQuery is ExtJS bedoeld om complete applicaties te bouwen - alle tools die je nodig hebt, zijn te vinden in het framework - terwijl jQuery is ontworpen om in een bestaande site te worden geplaatst voeg functionaliteit toe.
"Het belangrijkste verschil tussen een JavaScript-framework zoals ExtJS en een JavaScript-bibliotheek zoals jQuery is dat ExtJS bedoeld is om complete applicaties te bouwen - alle tools die je nodig hebt, zijn te vinden in het framework - terwijl jQuery is ontworpen om in een bestaande site te worden geplaatst om functionaliteit toe te voegen? "
Om ExtJS te installeren, moeten we het eerst downloaden van de Sencha-website. Ga naar http://www.sencha.com/products/extjs en klik op de knop "Downloaden" in de rechterbovenhoek. Op deze pagina ziet u een sectie met de titel 'Werken in Open Source?' gevolgd door een koppeling om ExtJS 4.0.2a te downloaden - de nieuwste versie. Ga je gang en klik op die link en de download zal binnenkort beginnen. Nu zul je merken dat de download redelijk groot is, meer dan 30 megabytes. Dit komt omdat het zip-bestand dat je hebt gedownload niet alleen de ExtJS-framework-bestanden bevat, maar ook alle voorbeelden en documentatie die je op de Sencha-website kunt vinden. Daarnaast bevat het ook meerdere versies van het framework: een die volledig gedocumenteerd en niet-gecomprimeerd is voor ontwikkelingsdoeleinden en een die is verkleind en gecomprimeerd voor gebruik op productiesystemen. Zodra het zipbestand is gedownload, extraheert u de inhoud ervan en neemt u de map die het maakt, en uploadt u het naar uw website, zoals ik hier heb. Opmerking Ik heb de map hernoemd naar "extjs" - allemaal in kleine letters. Dit maakt het later gemakkelijker om te verwijzen.
Nu we wat achtergrondinformatie hebben doorgenomen en het Framework naar onze website hebben geüpload, laten we beginnen met het coderen. Zoals u kunt zien aan de hand van de projectbestanden hier links, heb ik al een basismapstructuur voor onze toepassing ingesteld en een index.html-pagina en een leeg script.js JavaScript-bestand gemaakt. Op de HTML-pagina plaatsen we alle benodigde scripts die we eerder hebben geüpload en in het JavaScript-bestand plaatsen we al onze programmacode.
Laten we beginnen met het openen van het index.html-bestand. Zoals u ziet, heb ik al een eenvoudige HTML-pagina opgezet met behulp van het HTML5-doctype. Nu ga ik u vertellen over de benodigde bestanden die u nodig hebt om een ExtJS-applicatie aan te maken en hoe u ze moet opnemen.
Het eerste dat we willen vermelden is het CSS-bestand. Zonder dit bestand ziet onze applicatie er niet goed uit wanneer deze wordt weergegeven.
Vervolgens moeten we de benodigde JavaScript-bestanden opnemen. Het eerste bestand dat we gaan opnemen is ext-all-debug; dit is de volledige ExtJS-bibliotheek, ongecomprimeerd. Ten tweede willen we ons script.js-bestand opnemen. Onthoud dat dit het bestand is waar al onze applicatiecode naartoe gaat.
Nu we alle benodigde bestanden hebben, beginnen we met het coderen. Het eerste wat we willen doen, is ervoor zorgen dat alle code die we schrijven wordt geactiveerd nadat de webpagina is geladen, dus we pakken al onze code in bij een oproep naar de functie Ext.onReady. Voeg het volgende toe aan het script.js-bestand:
Ext.onReady (function () );
Nu zijn er twee dingen die ik wil benadrukken over dit stukje code: ten eerste geven we een volledige functie door in een methode call (onReady). Dit is een callback: een functie die wordt gebeld zodra een andere taak is voltooid. In dit geval is de pagina klaar met laden. Ten tweede zul je merken dat ik deze methodeaanroep voorafging met "Ext". Dit wordt een naamruimte genoemd. Een naamruimte is een manier om variabelen en methoden in afzonderlijke containers te plaatsen om zaken als variabele botsingen te voorkomen. ExtJS vertrouwt sterk op naamruimten om correct te kunnen werken. Elke methode-aanroep in ExtJS bevindt zich feitelijk in - op zijn minst - één naamruimte: Ext. Tijdens deze zelfstudie worden u blootgesteld aan complexere voorbeelden van gebruik van naamruimten.
Oké, nu we onze onReady-methode hebben ingesteld, laten we onze gegevens bepalen. Werk uw script.js-bestand bij met het volgende:
Accentsconagua
Ext.onReady (function () Ext.create ('Ext.grid.Panel', );); Hier verklaren we een nieuwe instantie of kopie van een ExtJS-gegevensraster door de volledige naamruimte 'Ext.grid.Panel' door te geven aan de 'create'-methode. Nu zie je ook de lege accolades die ik heb doorgegeven. In JavaScript betekent een paar lege accolades een leeg object. In ExtJS, wanneer u een gegevensraster (of een ander object) maakt met de methode "create", moet u de instellingen doorgeven of - in ExtJS-termen - de configuratie voor dat object door een JavaScript-object door te geven met eigenschappen die de eigenschappen van het raster dat we maken. Als dat een beetje verwarrend klinkt, is het logischer om verder te gaan en het gegevensraster te configureren. Laten we doorgaan en dat nu doen:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', ));) Zoals u kunt zien, hebben we een eigenschap met de naam 'store' toegevoegd aan ons gegevensraster en een instantie van een nieuw object eraan toegewezen - een winkel. In ExtJS is het doel van een gegevensraster om gegevens weer te geven, en die gegevens moeten ergens vandaan komen: een winkel.
Een winkel is voor het grootste deel slechts een verzameling records. Een meer realistisch voorbeeld hiervan is de contact-app op uw smartphone. Het deel van de app waarmee u uw contactpersonen kunt zien, is het raster en het deel van de app dat die lijst met contacten vult, is de winkel.
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: [name: 'id', type: 'int ', name:' first_name ', type:' string ', name:' last_name ', type:' string ', name:' dob ', type:' date ', dateFormat:' Ymd ' ]));); Zoals u kunt zien, hebben we een eigenschap met de naam "velden" toegevoegd aan ons winkelobject. Velden lijken op de kolomkoppen in een spreadsheet. Als elke rij in het werkblad één record is, vertegenwoordigt elke kolom - of veld - in het werkblad een eigenschap van dat record. Voor ons voorbeeld vandaag zullen we een gegevensraster vol met contactpersonen maken, zodat elk record in de winkel zal beschikken over: een ID die eenvoudigweg een unieke ID voor elke record, een voornaam, een achternaam en een geboortedatum. Zoals u kunt zien, hebben we voor elk veld een eigenschap 'name' en een eigenschap 'type' opgegeven. Deze eigenschappen zijn redelijk eenvoudig: we vertellen onze winkel gewoon wat voor soort veld het is en hoe het moet worden genoemd. Nu, als je het dob - of de geboortedatumveld inschakelt, zul je merken dat we een soort 'datum' hebben ingesteld om een datumveld aan te duiden - niets is daar echt niet op z'n plaats - maar we hebben ook toegevoegd een eigenschap 'dateFormat'. Deze eigenschap vertelt de winkel dat het dob-veld de datumwaarde opslaat in jaar, maand, dagnotatie. Dit lijkt misschien vreemd maar het zal heel belangrijk worden zodra we beginnen met het opzetten van de rest van het netwerk.
Nu we onze winkel hebben opgezet en een aantal velden hebben toegevoegd, gaan we doorgaan en vullen we gegevens in:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', fields: [name: 'id', type: 'int ', name:' first_name ', type:' string ', name:' last_name ', type:' string ', name:' dob ', type:' date ', dateFormat:' Ymd ' ], data: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id: 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']));); Kortom, wat we hier hebben gedaan, is onze winkel vullen met voorbeeldgegevens met behulp van de velden die we eerder als sjabloon hebben gedefinieerd. Als u dichtbij kijkt, ziet u dat de eigenschapnamen in de gegevens overeenkomen met de veldnamen in de eigenschap 'fields' van de winkel. Dit wordt 'mapping' genoemd. We brengen de gegevens van de eigenschap data naar de bijbehorende velden in de eigenschap 'fields' van de store. Merk ook op hoe we ervoor hebben gezorgd dat de gegevenstypen van de gegevens overeenkomen met de gegevenstypen van de winkel. Als u ze in de war brengt, worden dingen mogelijk niet correct geladen.
Okay, dat is alles wat we moeten doen om de winkel van grid te configureren, dus laten we teruggaan naar het configureren van het raster zelf. Het volgende dat we in ons rooster willen instellen, zijn de kolommen. Dit is precies hoe het klinkt: we gaan instellen welke kolommen worden weergegeven wanneer ons raster wordt geladen.
Ext.onReady (function () Ext.create ('Ext.grid.Panel', width: '30% ', store: Ext.create (' Ext.data.Store ', fields: [name:' id ', type:' int ', naam:' first_name ', type:' string ', name:' last_name ', type:' string ', name:' dob ', type:' date ' , dateFormat: 'Ymd'], data: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id : 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']), columns: [header: 'ID', dataIndex: 'id' , header: 'First Name', dataIndex: 'first_name', header: 'Last Name', dataIndex: 'last_name', header: 'Date of Birth', dataIndex: 'dob', format: ' m / d / Y ', xtype:' datecolumn ']);); Net zoals we eerder hebben gedaan, hebben we de eigenschap - "kolommen" - verklaard en doorgegeven in een reeks objecten, waarbij elk object een enkele kolom in het raster vertegenwoordigt. Merk op hoe elke kolom ten minste twee eigenschappen bevat: 'header' en 'dataIndex'. Header geeft aan wat wordt weergegeven als de kolomkop in het raster (wat de gebruiker te zien krijgt); dataIndex wijst die kolom toe aan een bepaald veld in de winkel. En dat is het! Dat is alles wat u hoeft te doen om een gegevensraster te bouwen.
Voordat we kunnen zeggen dat we helemaal klaar zijn, moeten we het raster naar het scherm verplaatsen. Om dat te doen, laten we ons raster opslaan in een variabele die we later opnieuw kunnen gebruiken:
? var grid = Ext.create ('Ext.grid.Panel', ? Het enige dat we hier zeggen is "Grid, render naar het lichaam van het HTML-document" - Vrij eenvoudig. Ga je gang en vernieuw ons index.html-bestand om te zien hoe we het hebben gedaan. Zoals u ziet, hebben we in minder dan 30 minuten een robuust gegevensraster gemaakt met al deze functies: we kunnen kolommen weergeven en verbergen, we kunnen de gegevens sorteren en we kunnen de kolommen anders rangschikken. Dat is de kracht van ExtJS!
In Review bespraken we wat ExtJS is, het verschil tussen een bibliotheek en een raamwerk, hoe we ExtJS kunnen downloaden en installeren en we hebben besproken hoe we een ExtJS-object kunnen definiëren en configureren - in dit geval een gegevensraster.
Als je meer wilt weten over ExtJS en de documentatie wilt lezen, raad ik je ten zeerste aan om naar sencha.com te gaan website en bekijk hun API-documenten voor ExtJS 4. Hier vindt u alle informatie die u nodig hebt om uw eigen applicaties te ontwikkelen. Als je vastloopt, kun je de sencha.com-forums bekijken en hen om hulp vragen of een andere programmeersite met een prikbord.
