extjs Handledning
Komma igång med extjs

Anmärkningar

versioner

Skapa en Hello World-applikation - Via Sencha Cmd

Detta exempel visar att du skapar en grundläggande applikation i ExtJS med hjälp av Sencha Cmd för att starta om processen - denna metod genererar automatiskt viss kod och en skelettstruktur för projektet.

Öppna ett konsolfönster och ändra arbetskatalogen till ett lämpligt utrymme att arbeta i. I samma fönster och katalog kör följande kommando för att generera en ny applikation.

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

Obs: -sdk flaggan anger platsen för katalogen extraherad från ramarkivet.

I ExtJS 6+ har Sencha sammanfört både ExtJS- och Touch- ramverket till en enda kodbaserad, differentierad med termerna klassisk respektive modern . För enkelhetens skull om du inte vill rikta in sig på mobila enheter kan en ytterligare flagga anges i kommandot för att minska röran i arbetsytan.

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

Utan ytterligare konfiguration bör en fullt funktionell demo-applikation nu ligga i den lokala katalogen. Ändra nu arbetskatalogen till den nya HelloWorld projektkatalogen och kör:

> sencha app watch

Genom att göra detta sammanställs projektet med standardbyggnadsprofilen och en enkel HTTP-server startas som möjliggör visning av applikationen lokalt via en webbläsare. Som standard på port 1841 .

Installation och installation

Typisk användning av ExtJS utnyttjar ramverket för att bygga en-sidiga rik-applikationer (RIA). Det enklaste sättet att komma igång är att använda Sencha Cmd , ett CLI-byggverktyg som täcker de flesta allmänna problem i en livscykel för installationen, främst:

• paket- och beroendehantering
• kod sammanställning / paketering och minifiering
• hantera byggstrategier för olika mål och plattformar

» Ladda ner Sencha Cmd

Det andra steget är att ladda ner SDK, ExtJS är en kommersiell produkt - för att få en kopia, en av:

• logga in på Sencha Support för den kommersiella licensen versionen ( produktsidan )
• ansöka om en utvärderingskopia som är giltig i 30 dagar
• begära GPL v3-versionen tillgänglig för open source-projekt
  (Observera att du kanske inte kan komma åt den senaste versionen med det här alternativet)

Efter att ha laddat ner SDK måste du se till att arkivet extraheras innan du fortsätter.

Obs : Se den officiella dokumentationen om kommande igång för en omfattande guide till ExtJS-projekt.

Efter installation av Sencha Cmd kan tillgängligheten verifieras genom att öppna ett konsolfönster och köra:

> sencha help

Vi har nu de verktyg som krävs för att skapa och distribuera ExtJS-applikationer, notera katalogplatsen där SDK extraherades, eftersom detta kommer att krävas i ytterligare exempel.

Skapa en Hello World-applikation - manuellt

Låt oss börja använda ExtJS för att bygga en enkel webbapplikation.

Vi skapar en enkel webbapplikation som bara har en fysisk sida (aspx / html). Minst kommer varje ExtJS-applikation att innehålla en HTML- och en JavaScript-fil - vanligtvis index.html och app.js.

Filindex.html eller din standardsida kommer att innehålla referenser till CSS- och JavaScript-kod för ExtJS, tillsammans med din app.js-fil som innehåller koden för din applikation (i princip utgångspunkt för din webbapplikation).

Låt oss skapa en enkel webbapplikation som kommer att använda ExtJS-bibliotekskomponenter:

Steg 1: Skapa en tom webbapplikation

Som visas på skärmdumpen har jag skapat en tom webbapplikation. För att göra det enkelt kan du använda alla webbapplikationsprojekt i redigeraren eller IDE du väljer.

Steg 2: Lägg till en standardwebbsida

Om du har skapat en tom webbapplikation måste vi inkludera en webbsida som skulle vara startsidan för vår applikation.

Steg 3: Lägg till Ext Js-referenser till Default.aspx

Detta steg visar hur vi använder extJS Library. Som visas på skärmdumpen i Default.aspx har jag precis hänvisat till tre filer:

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

Sencha har samarbetat med CacheFly, ett globalt innehållsnätverk, för att tillhandahålla gratis CDN-värd för ExtJS-ramverket. I det här exemplet har jag använt Ext: s CDN-bibliotek, men vi kunde använda samma filer (ext-all.js & ext-all.css) från vår projektkatalog istället eller som säkerhetskopior om CDN inte var tillgängligt.

Genom att hänvisa till app.js, laddades det i webbläsaren och det skulle vara utgångspunkten för vår applikation.

Förutom dessa filer har vi en platshållare där UI kommer att återges. I det här exemplet har vi en div med id "whitespace" som vi kommer att använda senare för att göra UI.

<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> 

Steg 4: Lägg till appmapp & app.js i ditt webbprojekt

ExtJS ger oss ett sätt att hantera koden i ett MVC-mönster. Som visas på skärmdumpen har vi en behållarmapp för vår ExtJS-applikation, i detta fall 'app'. Den här mappen kommer att innehålla all vår applikationskod som är uppdelad i olika mappar, dvs modell, vy, styrenhet, butik etc. För närvarande har den bara app.js-filen.

Steg 5: Skriv din kod i app.js

App.js är utgångspunkten för vår ansökan; för det här exemplet har jag precis använt minsta konfiguration som krävs för att starta applikationen.

Ext.application representerar en ExtJS-applikation som gör flera saker. Det skapar en global variabel " SenchaApp " som tillhandahålls i namnkonfigurationen och alla applikationsklasser (modeller, vyer, kontroller, butiker) kommer att finnas i det enda namnområdet. Lansering är en funktion som kallas automatiskt när alla applikationer är redo (alla klasser laddas ordentligt).

I det här exemplet skapar vi en panel med viss konfiguration och återger den på platshållaren som vi tillhandahöll i 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'
        });
    }
});

Utgångsskärmbild

När du kör denna webbapplikation med Default.aspx som en startsida visas följande fönster i webbläsaren.