extjs Tutorial
Erste Schritte mit extjs

Bemerkungen

Versionen

Erstellen einer Hello World-Anwendung - Über Sencha Cmd

In diesem Beispiel wird das Erstellen einer Basisanwendung in ExtJS mit Sencha Cmd zum Booten des Prozesses veranschaulicht. Diese Methode generiert automatisch Code und eine Skelettstruktur für das Projekt.

Öffnen Sie ein Konsolenfenster und ändern Sie das Arbeitsverzeichnis in einen geeigneten Bereich, in dem Sie arbeiten möchten. Führen Sie in demselben Fenster und in demselben Verzeichnis den folgenden Befehl aus, um eine neue Anwendung zu generieren.

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

Anmerkung: Das Flag -sdk gibt den Speicherort des aus dem Framework-Archiv extrahierten Verzeichnisses an.

In ExtJS 6+ haben Sencha sowohl das ExtJS- als auch das Touch- Framework in einer einzigen Codebasis zusammengeführt, die sich durch die Begriffe klassisch und modern auszeichnet. Der Einfachheit halber, wenn Sie nicht auf mobile Geräte abzielen möchten, kann im Befehl ein zusätzliches Flag angegeben werden, um das Durcheinander im Arbeitsbereich zu reduzieren.

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

Eine vollständig funktionsfähige Demoanwendung sollte sich jetzt ohne weitere Konfiguration im lokalen Verzeichnis befinden. Ändern Sie nun das Arbeitsverzeichnis in das neue HelloWorld Projektverzeichnis und führen Sie HelloWorld aus:

> sencha app watch

Auf diese Weise wird das Projekt mit dem Standard-Build-Profil kompiliert und ein einfacher HTTP-Server wird gestartet, der die lokale Anzeige der Anwendung über einen Webbrowser ermöglicht. Standardmäßig an Port 1841 .

Installation und Einrichtung

Die typische Verwendung von ExtJS nutzt das Framework zur Erstellung einseitiger Rich-Applications (RIA). Der einfachste Weg, um loszulegen, ist die Verwendung von Sencha Cmd , einem CLI-Build-Tool, das die meisten allgemeinen Probleme in einem Bereitstellungslebenszyklus abdeckt, hauptsächlich:

• Paket- und Abhängigkeitsmanagement
• Code-Kompilierung / Bündelung und Minifizierung
• Verwalten von Build-Strategien für verschiedene Ziele und Plattformen

» Sencha Cmd herunterladen

Der zweite Schritt ist das Herunterladen des SDK. ExtJS ist ein kommerzielles Produkt - um eine Kopie zu erhalten, eine der folgenden:

• Melden Sie sich beim Sencha-Support für die kommerzielle Lizenzversion ( Produktseite ) an.
• Beantragen Sie ein Testexemplar, das 30 Tage gültig ist
• Fordern Sie die für Open-Source-Projekte verfügbare GPL v3-Version an
  (Beachten Sie, dass Sie mit dieser Option möglicherweise nicht auf die neueste Version zugreifen können.)

Stellen Sie nach dem Herunterladen des SDK sicher, dass das Archiv extrahiert wird, bevor Sie fortfahren.

Hinweis : In der offiziellen Dokumentation " Erste Schritte" finden Sie eine umfassende Anleitung zu ExtJS-Projekten.

Nach der Installation von Sencha Cmd kann die Verfügbarkeit überprüft werden, indem ein Konsolenfenster geöffnet wird und Folgendes ausgeführt wird:

> sencha help

Wir verfügen jetzt über die Tools, die zum Erstellen und Bereitstellen von ExtJS-Anwendungen erforderlich sind. Notieren Sie sich das Verzeichnis, in das das SDK extrahiert wurde, da dies in weiteren Beispielen erforderlich ist.

Hello World-Anwendung erstellen - manuell

Beginnen wir mit ExtJS, um eine einfache Webanwendung zu erstellen.

Wir erstellen eine einfache Webanwendung, die nur eine physische Seite (aspx / html) enthält. Jede ExtJS-Anwendung enthält mindestens eine HTML- und eine JavaScript-Datei - in der Regel index.html und app.js.

Die Datei index.html oder Ihre Standardseite enthält die Verweise auf den CSS- und JavaScript-Code von ExtJS sowie Ihre app.js-Datei, die den Code für Ihre Anwendung enthält (im Wesentlichen der Ausgangspunkt Ihrer Webanwendung).

Lassen Sie uns eine einfache Webanwendung erstellen, die ExtJS-Bibliothekskomponenten verwendet:

Schritt 1: Erstellen Sie eine leere Webanwendung

Wie im Screenshot gezeigt, habe ich eine leere Webanwendung erstellt. Zur Vereinfachung können Sie ein beliebiges Webanwendungsprojekt im Editor oder der IDE Ihrer Wahl verwenden.

Schritt 2: Fügen Sie eine Standardwebseite hinzu

Wenn Sie eine leere Webanwendung erstellt haben, müssen Sie eine Webseite hinzufügen, die als Startseite unserer Anwendung dienen würde.

Schritt 3: Fügen Sie Ext Js-Referenzen zu Default.aspx hinzu

Dieser Schritt zeigt, wie wir die extJS Library nutzen. Wie im Screenshot in der Default.aspx gezeigt, habe ich gerade 3 Dateien referenziert:

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

Sencha hat sich mit CacheFly, einem globalen Content-Werbenetzwerk, zusammengetan, um ein kostenloses CDN-Hosting für das ExtJS-Framework bereitzustellen. In diesem Beispiel habe ich die CDN-Bibliothek von Ext verwendet. Wir könnten jedoch dieselben Dateien (ext-all.js & ext-all.css) aus unserem Projektverzeichnis verwenden oder als Backups für den Fall, dass das CDN nicht verfügbar ist.

Durch den Verweis auf die app.js wird sie in den Browser geladen und ist der Ausgangspunkt für unsere Anwendung.

Abgesehen von diesen Dateien haben wir einen Platzhalter, auf dem die Benutzeroberfläche gerendert wird. In diesem Beispiel haben wir ein div mit der ID "Whitespace", das wir später zum Rendern der Benutzeroberfläche verwenden werden.

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

Schritt 4: Fügen Sie App-Ordner und app.js zu Ihrem Webprojekt hinzu

ExtJS bietet uns die Möglichkeit, den Code in einem MVC-Muster zu verwalten. Wie im Screenshot gezeigt, haben wir einen Containerordner für unsere ExtJS-Anwendung, in diesem Fall 'app'. Dieser Ordner enthält den gesamten Anwendungscode, der in verschiedene Ordner aufgeteilt ist, z. B. Modell, Ansicht, Controller, Geschäft usw. Derzeit enthält er nur die Datei app.js.

Schritt 5: Schreiben Sie Ihren Code in app.js

App.js ist der Ausgangspunkt unserer Bewerbung. Für dieses Beispiel habe ich nur die minimale Konfiguration verwendet, die zum Starten der Anwendung erforderlich ist.

Ext.application steht für eine ExtJS-Anwendung, die verschiedene Aufgaben ausführt . Es erstellt eine globale Variable ' SenchaApp ', die in der Namenskonfiguration bereitgestellt wird, und alle Anwendungsklassen (Modelle, Ansichten, Controller, Stores) befinden sich in dem einzelnen Namensraum. Start ist eine Funktion, die automatisch aufgerufen wird, wenn alle Anwendungen bereit sind (alle Klassen werden ordnungsgemäß geladen).

In diesem Beispiel erstellen wir ein Panel mit einer Konfiguration und rendern es auf dem Platzhalter, den wir in der Datei Default.aspx bereitgestellt haben.

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 ausgeben

Wenn Sie diese Webanwendung mit Default.aspx als Startseite ausführen, wird das folgende Fenster im Browser angezeigt.