So implementieren Sie die Datenbindung in Ext.js: Eine praktische exemplarische Vorgehensweise

Willkommen zu unserem praktischen Leitfaden, wie Sie die Datenbindung im Ext.js JavaScript Framework zum Funktionieren bringen! Die Datenbindung ist wie ein magischer Klebstoff, der das Erscheinungsbild Ihrer Website mit den Änderungen daran verbindet. Ext.js JavaScript Framework ist ein cooles Tool, das Ihnen dabei hilft, dies einfach zu tun. In diesem Blog führen wir Sie in einfachen Schritten durch den gesamten Prozess. Egal, ob Sie ein professioneller Programmierer sind oder gerade erst anfangen, wir behandeln die Grundlagen.

Sie erfahren, wie Sie Daten mit Ihren Ext.js-JavaScript-Framework-Teilen verknüpfen, damit Ihre Website reibungslos reagieren und aktualisiert werden kann. Am Ende verfügen Sie über die Fähigkeiten, Ihre Web-Apps interaktiver und dynamischer zu gestalten. Beginnen wir mit der Datenbindung von Ext.js!

Was ist Datenbindung?

Die Datenbindung ist wie eine hilfreiche Verbindung zwischen dem Aussehen einer Website und den Dingen, die sich darauf ändern können. Stellen Sie es sich wie eine magische Verbindung vor, die dafür sorgt, dass die Website und die Daten reibungslos zusammenarbeiten. Wenn sich also etwas an den Daten ändert, etwa ein Preis oder ein Name, zeigt die Website diese Änderung automatisch an, ohne dass Sie etwas tun müssen.

In Ext.js, einem Toolkit für Webentwickler, gibt es eine coole Funktion namens bidirektionale Datenbindung. Das bedeutet, dass die Daten aktualisiert werden, wenn Sie etwas auf der Website tun, beispielsweise auf eine Schaltfläche klicken oder etwas in ein Feld eingeben. Und wenn sich die Daten ändern, wird die Website sofort aktualisiert. Dadurch wird Ihre Website interaktiver und reaktionsfähiger.

Welche Bedeutung hat die Datenbindung in der Webentwicklung?

Die Datenbindung ist in der Webentwicklung äußerst wichtig, da sie sicherstellt, dass das Erscheinungsbild Ihrer Website den sich ändernden Daten entspricht, ohne dass Sie alles manuell erledigen müssen. Es macht Web- und mobile Apps viel dynamischer und reaktionsschneller und spart Entwicklern Zeit und Aufwand beim Schreiben komplexer Codes.

Zwei-Wege-Datenbindung in Ext.js.

Alle Arten von Bindungen in Ext JS und Sencha Touch folgen einem bekannten Prozess: Sie verwenden Setter und Updater. Eine unidirektionale Bindung bedeutet, dass, wenn sich etwas im ViewModel ändert, eine Konfiguration mithilfe seines Setters aktualisiert wird. Die bidirektionale Bindung ist ähnlich, verwendet jedoch einen Updater, der einem speziellen Handler ähnelt. Wenn ein Updater eine Konfiguration erfolgreich ändert, ändert er auch den verknüpften Wert im ViewModel, wodurch andere Bindungen aktualisiert werden.

Damit eine Konfiguration die bidirektionale Bindung unterstützt, können Sie die Option „twoWayBindable“ verwenden. Normalerweise wird es im Hintergrund verwendet, kann aber beim Erstellen benutzerdefinierter Ansichten oder Komponenten hilfreich sein. Ext.field.Text konfiguriert beispielsweise seinen „Wert“ so, dass er in beide Richtungen bindbar ist:

twoWayBindable: {

Wert: 1

}

In einem Beispiel mit einem Spinnerfeld löst es bei einer Wertänderung den Updater aus, der vom ViewModel abgefangen wird. Dadurch wird dann der Inhalt eines Containers unten aktualisiert, alles nur, weil die „HTML“-Konfiguration verlinkt ist. Dies funktioniert reibungslos, da Ext.field.Spinner mit Ext.field.Text verknüpft ist, das so eingerichtet ist, dass es mit einer bidirektionalen Bindung für seinen „Wert“ arbeitet.

Wie installiere und richte ich Ext.js in einer Entwicklungsumgebung ein?

Um die Testversion der Ext JS-Bibliotheksdateien zu erhalten, besuchen Sie die Website von Sencha unter https://www.sencha.com. Nach der Registrierung erhalten Sie die Testversion per E-Mail als komprimierten Ordner mit dem Namen „ext-6.0.1-trial“.

Extrahieren Sie den Ordner, um verschiedene JavaScript- und CSS-Dateien für Ihre Anwendung zu finden. Zu den wichtigsten JavaScript-Dateien gehören:

1. ext.js : Die Kerndatei, die alle Anwendungsfunktionen enthält.
2. ext-all.js : Eine verkleinerte Version von ext.js ohne Kommentare.
3. ext-all-debug.js : Eine nicht verkleinerte Version von ext-all.js zum Debuggen.
4. ext-all-dev.js : Eine weitere nicht minimierte Version, nützlich für die Entwicklung mit Kommentaren und Konsolenprotokollen.
5. ext-all.js : Eine kleinere, produktionsbereite Version.

Sie können diese Dateien zum JS-Ordner Ihres Projekts hinzufügen oder einen direkten Pfad auf Ihrem System angeben. Für CSS stehen themenbasierte Dateien in verschiedenen Ordnern zur Verfügung, je nachdem, ob Sie eine Desktop- oder eine mobile Anwendung erstellen.

Verlinken Sie in Ihrer HTML-Datei die erforderlichen CSS- und JavaScript-Dateien. Alternativ können Sie ein Content Delivery Network (CDN) verwenden, um das lokale Herunterladen der Dateien zu vermeiden. Ext JS ist mit verschiedenen Browsern kompatibel, darunter IE 6 und höher, Firefox, Chrome, Safari und Opera, was es vielseitig für die Webentwicklung macht.

Wie erstelle ich eine einfache Ext.js-Anwendung?

Hier sind die einfachen Schritte zum schnellen Erstellen einer Ext JS-App:

Schritt 1: Pakete von npm installieren

Ext JS bietet 30-Tage-Testpakete an, die in der öffentlichen npm-Registrierung verfügbar sind. Sie können die neueste Ext JS-Version erwerben, indem Sie diesen Befehl ausführen:

$ npm install -g @sencha/ext-gen

Für bestehende Benutzer befinden sich Ext JS und die zugehörigen Pakete in der privaten npm-Registrierung von Sencha. Um darauf zuzugreifen, melden Sie sich bei der Registrierung an und installieren Sie npm mit den folgenden Befehlen:

$ npm login –registry=https://npm.sencha.com/ –scope=@sencha

$ npm install -g @sencha/ext-gen

Diese Befehle konfigurieren npm, um Pakete aus der Sencha-Registrierung im Bereich „@sencha“ abzurufen und zu installieren.

Schritt 2: Generieren der Anwendung

In diesem Schritt erstellen wir mit dem folgenden Befehl eine einfache App mit zwei Ansichten, die eine Startseite und ein Raster enthält:

ext-gen app -a -t moderndesktop -n ModernApp

Schritt 3: Erkundung der App

Nachdem unser Projekt nun generiert ist, navigieren Sie zu diesem Verzeichnis mit:

cd ./modern-app

Um Ihre App zu erkunden, starten Sie sie mit dem folgenden npm-Befehl:

npm-Start

Mit diesen Schritten können Sie Ihre Ext JS-Anwendung schnell kostenlos und als Open-Source-Backup einrichten.

Sencha: Ihr Partner für außergewöhnliche Benutzeroberfläche – Nehmen Sie Kontakt auf!

Wofür werden Modelle in Ext.js verwendet?

Ein Modell repräsentiert eine Art Daten innerhalb einer Anwendung. Im Kern besteht ein Modell aus einer Reihe von Feldern und den zugehörigen Daten. Ein Modell besteht aus vier Schlüsselelementen: Felder, Proxy, Zuordnungen und Validierungen.

Felder

Modellfelder werden innerhalb der Eigenschaft „fields“ als Array angegeben. Jedes Feld wird als JavaScript-Objekt beschrieben, das Attribute wie Name und Typ enthält.

Stellvertreter

Proxys werden von Geschäften eingesetzt und übernehmen Aufgaben im Zusammenhang mit dem Laden und Speichern von Modelldaten. Es gibt zwei Arten von Proxys:

1. Client-Proxys, die Browserspeicher oder lokalen Speicher zur Datenspeicherung nutzen.
2. Server-Proxys sind dafür verantwortlich, Daten über Methoden wie Ajax, JSON-P oder REST an den Server zu senden.

Verbände

Modelle können auch in kleinen Anwendungen mit mehreren Modellen Verbindungen untereinander herstellen. Es können verschiedene Arten von Zuordnungen erstellt werden, darunter Eins-zu-Eins-, Eins-zu-Viele- und Viele-zu-Eins-Beziehungen.

Validierungen

Validierungen sind spezielle Strukturen, mit denen die Richtigkeit der in bestimmten Modellfeldern gespeicherten Daten überprüft wird. ExtJS bietet eine Reihe von Standardvalidierungen. Häufige Beispiele sind Prüfungen auf minimale oder maximale Feldlängen.

Welche Rolle spielen Ansichten in Ext.js?

Ansichten verwalten den visuellen Aspekt und die Benutzeroberfläche einer Anwendung. Ansichten bestehen aus Komponenten und Layouts. Jede Komponente kann als Container für eine andere Komponente dienen und ermöglicht so die Strukturierung der Anwendungsschnittstelle als hierarchische Sammlung von Ansichten.

In ExtJS stehen verschiedene Layouts zur Verfügung:

1. FitLayout: Dieses Layout erweitert das innere Element, um es an die Grenzen des übergeordneten Containers anzupassen.
2. VBoxLayout: Es erleichtert die vertikale Anordnung von Elementen.
3. HBoxLayout: Es erleichtert die horizontale Anordnung von Elementen.
4. BorderLayout: Dieses Layout ermöglicht das Anbringen von Elementen an einer der vier Seiten eines Fensters oder das Andocken in der Mitte.

Wie richte ich eine Datenbindung zwischen Modell und Ansicht ein?

Die Ext.app.ViewModel-Klasse ist für die Herstellung von Datenverbindungen von entscheidender Bedeutung. Stellen Sie es sich wie einen Datenorganisator vor. Es ähnelt Ext.data.Model, verarbeitet Daten jedoch auf strukturierte Weise, wie einen Stammbaum und nicht nur eine Liste von Fakten. Es verfügt außerdem über eine „bind()“-Methode, um auf Änderungen in diesen organisierten Daten zu achten.

Nun zu diesem Stammbaum der Daten: Er funktioniert ein bisschen so, wie Wissen in einer Familie weitergegeben wird. Ein Kind kann von seinen Eltern lernen, und die Eltern von ihren Eltern und so weiter. In unserem Fall können sogar die „Enkel“-Komponenten von übergeordneten Komponenten lernen. Es geht darum, Informationen effektiv zu teilen.

Das Einrichten der Datenbindung zwischen Modell und Ansicht in Ext JS umfasst einige wesentliche Schritte:

1. Erstellen Sie ein Modell : Definieren Sie zunächst ein Modell, das die Datenstruktur darstellt, mit der Sie arbeiten möchten.Dieses Modell sollte Felder enthalten, die den Daten entsprechen, die Sie in Ihrer Ansicht anzeigen müssen.
2. Erstellen Sie ein ViewModel : Das ViewModel fungiert als Vermittler zwischen Ihrem Modell und Ihrer Ansicht.Es verwaltet die Daten und bietet eine Möglichkeit, sie an Ihre Ansichtskomponenten zu binden. Sie können ein ViewModel in Ihrem Controller oder Ihrer Ansicht erstellen.
3. Daten an Komponenten binden : Verwenden Sie die „bind“-Methode des ViewModel, um die Felder Ihres Modells mit den Komponenten in Ihrer Ansicht zu verbinden.Wenn Sie beispielsweise über ein Textfeld verfügen, das den Namen einer Person anzeigen soll, können Sie es an das entsprechende Feld in Ihrem Modell binden.

viewModel: {

Formeln: {

vollständiger Name: function(get) {

var firstName = get('user.firstName');

var lastName = get('user.lastName');

return Vorname + ' ' + Nachname;

}

}

},

Artikel: [{

xtype: 'Textfeld',

fieldLabel: 'Vorname',

bind: '{user.firstName}'

}, {

xtype: 'Textfeld',

fieldLabel: 'Nachname',

bind: '{user.lastName}'

}, {

xtype: 'Textfeld',

fieldLabel: 'Vollständiger Name',

bind: '{fullName}' // Dies ist ein berechnetes Feld

}]

„`

4. Daten aktualisieren : Wenn Sie die Daten in Ihrem Modell aktualisieren (z. B. wenn ein Benutzer einen neuen Wert eingibt), aktualisiert der Datenbindungsmechanismus automatisch die verbundenen Ansichtskomponenten.Wenn ein Benutzer mit Ansichtskomponenten interagiert (z. B. ein Feld bearbeiten), werden die Änderungen ebenfalls auf das Modell zurückgespiegelt.

Abschluss

Ext JS bietet eine intelligente Möglichkeit, Daten und das, was Sie auf einer Webseite sehen, zu verknüpfen. Indem Sie Modelle einrichten und diese mit Ihren Webseitenelementen verbinden, können Sie sicherstellen, dass Daten geändert werden. Darüber hinaus wird Ihre Webseite automatisch aktualisiert und wenn Benutzer mit Ihrer Webseite interagieren, werden die Änderungen in Ihren Daten gespeichert.

Dadurch wird die Erstellung von Web-Apps einfacher, die Benutzererfahrung auf Ihrer Website verbessert und Entwickler können einfacher dynamische und reaktionsfähige Webanwendungen erstellen. Ext JS vereinfacht den gesamten Prozess des HTML-Codes und macht die Webentwicklung effizienter und benutzerfreundlicher.

FAQs

Was ist Ext.js und warum wird es für die Datenbindung verwendet?

Ext JS ist ein JavaScript-Framework. Es vereinfacht die Datenbindung und erstellt effizient reaktionsfähige Web- und Mobilanwendungen.

Welche Tools benötige ich für die Ext.js-Datenbindung?

Um die Datenbindung von Ext.js zu starten, benötigen Sie das Ext.js-Framework, einen Code-Editor und einen Webbrowser.

Was ist responsives Webdesign?

Responsive Webdesign passt Webkomponenten an verschiedene Bildschirmgrößen an und sorgt so für ein optimales Benutzererlebnis auf Desktops, Tablets und Mobiltelefonen.

Ist JQuery ein JS-Framework?

Nein, jQuery ist kein JavaScript-Framework; Es handelt sich um eine Bibliothek zur Vereinfachung der DOM-Manipulation und von AJAX-Anfragen.