extjsAan de slag met extjs


Opmerkingen

ExtJS is een JavaScript-framework van Sencha voor het bouwen van Rich Internet Applications. Het beschikt over een van de grootste bibliotheken met vooraf gebouwde modulaire UI-componenten.

Sinds versie 5.0 pleit Sencha voor het gebruik van Model-View-ViewModel (MVVM) -architectuur op zijn platform. Het onderhoudt ook ondersteuning voor Model-View-Controller (MVC) -architectuur die de primaire architectuurstijl was die tot versie 4.x werd ondersteund.

Bovendien heeft Sencha zich gericht op het uitrusten van ExtJS met mobielgerichte en responsieve webtoepassingsmogelijkheden. Het voormalige Sencha Touch-framework is sinds versie 6.0 geïntegreerd met ExtJS met inspanningen om de klantenbasis te combineren en ontslagen te consolideren in het nieuwe gecombineerde framework.

versies

Versie Publicatiedatum
6.2 2016/06/14
- 6,0 2015/08/28
5.0 2014/06/02
4.0 2011-04-26
3.0 2009-07-06
2.0 2007-12-04
1.1 2007-04-15

Installatie & Setup

Typisch gebruik van ExtJS maakt gebruik van het framework om rich-toepassingen met één pagina (RIA) te bouwen. De eenvoudigste manier om aan de slag te gaan, is door gebruik te maken van Sencha Cmd , een CLI-buildtool die de meeste algemene aandachtspunten in een implementatielevenscyclus behandelt, voornamelijk:

  • pakket- en afhankelijkheidsbeheer
  • compilatie / bundeling van code en minificatie
  • beheer van bouwstrategieën voor verschillende doelen en platforms

» Download Sencha Cmd


De tweede stap is het downloaden van de SDK, ExtJS is een commercieel product - om een kopie te krijgen, een van:

Controleer na het downloaden van de SDK of het archief is uitgepakt voordat u doorgaat.


Opmerking : zie de officiële documentatie Aan de slag voor een uitgebreide handleiding voor ExtJS-projecten.

Na installatie van Sencha Cmd kan de beschikbaarheid worden geverifieerd door een consolevenster te openen en uit te voeren:

> sencha help
 

We hebben nu de tools die nodig zijn om ExtJS-applicaties te maken en te implementeren, let op de directorylocatie waar de SDK is uitgepakt, omdat dit in verdere voorbeelden nodig is.

Een Hello World-applicatie maken - handmatig

Laten we ExtJS gaan gebruiken om een eenvoudige webtoepassing te bouwen.

We maken een eenvoudige webtoepassing met slechts één fysieke pagina (aspx / html). Elke ExtJS-toepassing bevat minimaal één HTML- en één JavaScript-bestand - meestal index.html en app.js.

Het bestand index.html of uw standaardpagina bevat de verwijzingen naar de CSS- en JavaScript-code van ExtJS, samen met uw app.js-bestand dat de code voor uw applicatie bevat (in feite het startpunt van uw webapplicatie).

Laten we een eenvoudige webtoepassing maken die gebruik maakt van ExtJS-bibliotheekcomponenten:

Stap 1: Maak een lege webapplicatie

Zoals te zien in de screenshot heb ik een lege webapplicatie gemaakt. Om het eenvoudig te maken, kunt u elk webtoepassingsproject gebruiken in de editor of IDE van uw keuze. voer hier de afbeeldingsbeschrijving in

Stap 2: voeg een standaardwebpagina toe

Als u een lege webtoepassing hebt gemaakt, moeten we een webpagina opnemen die de startpagina van onze toepassing zou zijn.

voer hier de afbeeldingsbeschrijving in

Stap 3: Voeg Ext Js References toe aan Default.aspx

Deze stap laat zien hoe we gebruik maken van extJS Library. Zoals te zien in de screenshot in de Default.aspx, heb ik zojuist 3 bestanden doorverwezen:

  • ext-all.js
  • ext-all.css
  • app.js

Sencha werkt samen met CacheFly, een wereldwijd inhoudsnetwerk, voor gratis CDN-hosting voor het ExtJS-framework. In dit voorbeeld heb ik de CDN-bibliotheek van Ext gebruikt, maar we kunnen dezelfde bestanden (ext-all.js & ext-all.css) gebruiken in plaats daarvan of als back-ups in het geval dat de CDN niet beschikbaar was.

Door te verwijzen naar app.js, zou het in de browser worden geladen en zou het het startpunt voor onze applicatie zijn.

Afgezien van deze bestanden hebben we een tijdelijke aanduiding waar de gebruikersinterface wordt weergegeven. In dit voorbeeld hebben we een div met id "witruimte" die we later zullen gebruiken om de gebruikersinterface te renderen.

voer hier de afbeeldingsbeschrijving in

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 
 

Stap 4: App-map & app.js toevoegen aan uw webproject

ExtJS biedt ons een manier om de code in een MVC-patroon te beheren. Zoals te zien in de screenshot hebben we een containermap voor onze ExtJS-applicatie, in dit geval 'app'. Deze map bevat al onze applicatiecode die is opgesplitst in verschillende mappen, bijvoorbeeld model, weergave, controller, winkel, enz. Momenteel bevat deze alleen het app.js-bestand.

voer hier de afbeeldingsbeschrijving in

Stap 5: Schrijf uw code in app.js

App.js is het startpunt van onze applicatie; voor dit voorbeeld heb ik zojuist de minimale configuratie gebruikt die nodig is om de applicatie te starten.

Ext.application vertegenwoordigt een ExtJS- applicatie die verschillende dingen doet. Het creëert een globale variabele ' SenchaApp ' in de naamconfiguratie en alle toepassingsklassen (modellen, views, controllers, winkels) bevinden zich in de enkele naamruimte. Launch is een functie die automatisch wordt aangeroepen als alle applicaties gereed zijn (alle klassen worden correct geladen).

In dit voorbeeld maken we een deelvenster met een configuratie en geven deze weer op de tijdelijke aanduiding die we hebben opgegeven in de Default.aspx.

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});
 

Screenshot van uitvoer

Wanneer u deze webtoepassing met Default.aspx als opstartpagina uitvoert, verschijnt het volgende venster in de browser.

voer hier de afbeeldingsbeschrijving in

Een Hello World-applicatie maken - via Sencha Cmd

Dit voorbeeld demonstreert het maken van een basistoepassing in ExtJS met behulp van Sencha Cmd om het proces op te starten - deze methode genereert automatisch een code en een skeletstructuur voor het project.

Open een consolevenster en wijzig de werkmap in een geschikte ruimte om in te werken. Voer in hetzelfde venster en dezelfde map de volgende opdracht uit om een nieuwe toepassing te genereren.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 
 

Opmerking: de vlag -sdk geeft de locatie aan van de map die is geëxtraheerd uit het framework-archief.

In ExtJS 6+ heeft Sencha zowel het ExtJS- als het Touch- framework samengevoegd tot een enkele codebasis, onderscheiden door respectievelijk de termen klassiek en modern . Voor de eenvoud als u zich niet op mobiele apparaten wilt richten, kan een extra vlag worden opgegeven in de opdracht om rommel in de werkruimte te verminderen.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 
 

Zonder verdere configuratie zou een volledig functionele demo-applicatie zich nu in de lokale map moeten bevinden. Verander nu de werkmap naar de nieuwe HelloWorld projectmap en voer uit:

> sencha app watch
 

Hierdoor wordt het project gecompileerd met behulp van het standaard build-profiel en wordt een eenvoudige HTTP-server gestart waarmee de toepassing lokaal via een webbrowser kan worden bekeken. Standaard op poort 1841 .