Sencha Ext JS Tutorial: Eine Einführung in Ext JS 5

Sencha-Ext. JS ist ein JavaScript-Framework zum Erstellen interaktiver HTML5-basierter Webanwendungen. Es verfügt über ein umfangreiches UI-Anwendungsentwicklungs-Framework, eignet sich gut zum Darstellen von Daten und unterstützt eine Vielzahl von Browsern.

Dieser Blogbeitrag basiert auf den Codementor Office Hours mit Arthur Kay, dem Developer Relations Manager von Sencha. Der Artikel befasst sich mit den Neuerungen in Ext JS 5 und dient als einfache exemplarische Vorgehensweise zur Verwendung des Frameworks. Am Ende beantwortet Arthur einige der Fragen des Publikums, z. B. wie Sencha Ext JS 3.x im Vergleich zu 5 abschneidet und wie kompatibel Sencha mit Mobiltelefonen ist.


Einführung

Sencha gibt es seit dem Jahr 2007, mit 2 Millionen Entwicklern weltweit, die es verwenden, und über 10.000 kommerziellen Kunden, darunter 60 % der Fortune-100-Unternehmen wie Google, Adobe und Salesforce. Als jQuery und andere Bibliotheken im Jahr 2006 herauskamen, war Sencha zum Zeitpunkt seiner ersten Veröffentlichung ziemlich revolutionär, aber jetzt schreiben wir das Jahr 2014 und Senchas Flaggschiff Ext JS hat sich nun zu Version 5 entwickelt (und wurde kürzlich auf 5.1 im Dezember aktualisiert).

Einige wichtige Updates von Ext JS 5 sind:

Unterstützung von Anwendungen auf mehreren Geräten
Insbesondere funktioniert Ext JS 5 gut mit Tablets mit Diagrammen, die berührungsbasierte Gesten und neue ansprechende Themen unterstützen, die sich an die Bildschirmgröße von Mobilgeräten und Desktops anpassen können.

Erhöhte Entwicklerproduktivität
Ext JS 5 unterstützt auch die 2-Wege-Datenbindung, um Entwicklern Zeit zu sparen, und die Datenbindung ist nicht auf die HTML-Vorlage beschränkt, da sie über das gesamte Framework und alle Widgets hinweg erfolgen kann. Darüber hinaus unterstützt Ext JS 5 auch URL-Routing, sodass Deep-Linking möglich ist.

Sencha Ext JS vs. AngularJS

Wenn Sie sich fragen, wie Ext JS im Vergleich zu Angular JS abschneidet, finden Sie hier einen kurzen Überblick über die Unterschiede zwischen den beiden:

Wie Sie sehen können, verfolgt Ext JS einen ganz anderen Ansatz als Frameworks. Viele Widgets sind sofort einsatzbereit, und Benutzer müssen sich auch nicht auf Bibliotheken von Drittanbietern verlassen.

Noch wichtiger ist, dass Ext JS viele ältere Browser unterstützt, einschließlich Internet Explorer 8 und 9. Viele große Organisationen können nicht erwarten, dass ihre Benutzer die neuesten Browser auf ihren Geräten ausführen, zumal ein großer Teil der Internetbenutzer immer noch das Internet verwendet Entdecker 8.

In Bezug auf den Entwicklungsstil scheint AngularJS HTML-getrieben zu sein und benötigt daher einiges an handgefertigtem HTML. Ext JS ist im Vergleich eher JavaScript-gesteuert und erfordert nicht viel HTML-Code.

ein Beispiel für das HTML-Template einer Angular-App

Beispielanwendungen

Hallo Welt-App

Werfen wir einen Blick darauf, wie eine Ext JS Hello World-App aussehen würde.

Die HTML-Seite ist ziemlich einfach, wo sie das Ext JS-Framework zusammen mit einem Design enthält. Sie müssen nicht einmal etwas in der haben body Schild. Das Wichtigste im HTML-Template ist natürlich die app.js

Ähnlich wie Sie es in jQuery oder anderen Frameworks tun würden, die Ext.onReady -Block wird ausgeführt, sobald die HTML-Webseite vollständig geladen wurde. Sobald die Seite fertig ist, Ext.create() beginnt mit der Erstellung von Widgets und rendert sie dann auf dem Bildschirm.

In diesem HelloWorld-Beispiel erstellen wir das Widget Ext.Panel, das ist der Name der Klasse, und rendern sie im Hauptteil der Webseite. Es hat eine Höhe, Breite und einen Titel zusammen mit etwas rohem HTML, aber der HTML-Teil ist nicht etwas, was Sie normalerweise tun würden – dies dient nur zu Demozwecken. Wenn Sie in Ihren Browser springen, sehen Sie Folgendes:

Wo Sie ein Panel mit einem blauen Hintergrund aus dem Thema haben und das rohe HTML in den Rest des Panels geht.

Sie können mitmachen und dieses Beispiel durch die machen Ext. JS Hello World Dokumentation.

Sie können auch eine Live-Vorschau des Beispiels aus dem machen API-Dokumente wo Sie die Konfigurationsoptionen, Eigenschaften, Methoden usw. sehen können.

Generieren einer App über Sencha Cmd

Sencha Cmd ist eine Suite von Befehlszeilentools, mit denen Benutzer die von ihnen erstellte Anwendung optimieren können, in die Sie nicht das gesamte Sencha-Framework und den gesamten von Ihnen geschriebenen benutzerdefinierten Code einbeziehen müssen, es sei denn, Ihre Anwendung erfordert dies. Sencha Cmd lässt sich auch in Cordova und PhoneGap integrieren, sodass Sie Ihre App nativ verpacken und auf einem iPad oder Android-Tablet bereitstellen können.

Lassen Sie uns ein Terminal öffnen, um eine App über Sencha Cmd zu erstellen.

Wir führen hier einen Sencha Cmd aus und generieren eine Starteranwendung namens Codementordie an den Standort ausgegeben wird CodeMentorDemo. Dadurch wird automatisch eine Starteranwendung mit einer MVVM-Architektur zusammen mit allen erforderlichen Bindungen für einen Build-Prozess generiert.

Nachdem Sencha Cmd die Generierung der App abgeschlossen hat, können Sie Ihre IDE öffnen und Ihren gesamten Code und Ihre Dateien im CodeMentorDemo-Ordner finden.

Sie können den lokalen Webserver auch über das Sencha Cmd starten

sencha web start

In dem Ihre Webseite gestartet wird

Sencha-Gitter

Sencha Grid ist eine großartige Möglichkeit, Daten anzuzeigen, und es ist eine der beliebtesten Funktionen von Ext JS. Sie können das Raster sortieren, Spalten ein- und ausschalten und Spalten spontan neu anordnen. Ab Ext JS 5 gibt es nun ein Grid-Widget, das direkt in eine Grid-Zeile eingebettet werden kann und die Daten live aktualisiert.

Schauen wir uns eine App an, die Sencha Grid verwendet, in der das Ext JS Grid über einer vorhandenen Starter-App platziert wird.



Das Ext JS kann viele verschiedene Arten anderer Proxys verwenden, wie z. B. lokale Speicher-Proxys und REST-Proxys. Diese Beispiel-App verwendet einen AJAX-Proxy, der in der verwendet wird HelloWorld.store.Cars -Klasse, wo Code aus einer JSON-Datei geladen wird.


Die Modellautoklasse wird die Standardeinstellung erweitern Ext model, also würde es viele Dinge wie Getter und Setter erben. Hier können wir definieren, welche Arten von Feldern zu erwarten sind. Wir können entweder faul sein und ein Array von Zeichenfolgen für die Modellklasse bereitstellen, um herauszufinden, um welche Art von Daten es sich handelt, oder expliziter sagen, dass der Typ des Automodells eine Zeichenfolge sein sollte. Diese Namen sind wichtig, wenn wir in die Hauptansicht kommen.


Hier die text wäre der Titel der Kolumne, und die dataIndex gibt an, welche Spalte dem Geschäft zugeordnet wird. Sie können auch die Spalte definieren width oder machen flexdie den verbleibenden Raum horizontal teilen würde.

Weitere Informationen zu Sencha Ext JS finden Sie unter den folgenden Links:

Fragen und Antworten

Williams und pixx.io in den Sinn kommen. Viele der großen Unternehmen verwenden Ext JS für den proprietären und internen Gebrauch, daher werden Sie nicht viele Beispiele in öffentlichen Abständen finden. Sie können sich jedoch die ansehen Sencha-Blog für weitere Informationen, da viele Kunden vorgestellt und Unternehmen hervorgehoben werden, die über ihre Erfahrungen mit den Sencha-Frameworks sprechen möchten.

Wie würden Sie die Leistung von Ext JS 3.x mit Ext JS 5 vergleichen?

Obwohl es einen Kompromiss in einer verringerten Leistung durch das Umschreiben von Ext JS 4 zur Unterstützung von MVC und MVVM gab, hat Ext JS 5 seine Leistung verbessert. Im Moment gab es jedoch keinen expliziten Vergleich zwischen der Leistung der beiden Versionen.

Wie schwierig ist ein Upgrade von Ext JS 3.x auf 5?

Aufgrund großer architektonischer Unterschiede und API-Änderungen und Fehlerbehebungen im Wert von 5 Jahren wäre es wahrscheinlich ziemlich schwierig, von Version 3.x auf 5 zu aktualisieren. Eines der grundlegenden Ziele von Ext JS 5 war jedoch, diese Migrationsschwierigkeiten zu verhindern passiert wieder.

Was ist der beste Weg, mehrere Designs für eine App zu verwenden?

Eine Möglichkeit besteht darin, jedes Mal, wenn Sie eine neue App über den Sencha Cmd-Build-Prozess generieren, ein neues Thema anzubringen – viele Kunden haben ihre eigenen Apps auf diese Weise umbenannt. Ein anderer Ansatz ist die Konfiguration der app.json Datei, um anzugeben, welche Plattform welches Design erhält, und sie dann auszutauschen, wenn die Anwendung zum ersten Mal geladen wird. Das API-Dokumente haben Anleitungen für beide Methoden.

Wie gut unterstützt das Ext JS 5 Mobiltelefone?

Die Widgets von Ext JS 5 unterstützen explizit Tablets, aber diese laufen tatsächlich auch auf einem Telefon, einschließlich der Touch-Unterstützung. Da Telefone jedoch in der Regel leistungsschwach sind und viel kleinere Bildschirmgrößen als Tablets oder Desktops haben, haben Kunden keinen telefonischen Support angefordert, und daher gibt es nicht viel Dokumentation zur Entwicklung von iPhone- und Android-Telefonen.

Wäre Sencha Ext JS eine gute Wahl für Anfänger, die ihre ersten iPhone-Apps oder -Spiele erstellen möchten?

Wenn Sie sich ausschließlich auf die Entwicklung von Mobiltelefonen konzentrieren, ist Ext JS möglicherweise nicht die beste Wahl, da es sich um ein umfassendes Widget-Framework handelt. Es ist unwahrscheinlich, dass Sie eine große App erstellen werden, die alle verfügbaren Komponenten nutzt. Darüber hinaus ist Sencha keine Spieleentwicklungsfirma, was bedeutet, dass das Framework zwar um HTML5 herum liegt und Sie vielleicht denken, dass es gut zum Erstellen eines HTML5-Spiels ist, aber letztendlich nicht das richtige Werkzeug für den Job ist. Daher sollten Sie sich besser die Spielschnittstellenbibliotheken ansehen, um zu sehen, was Sie damit machen können.

Vor einigen Jahren hat Facebook stark in HTML5 investiert und sich dann im Wesentlichen zurückgezogen, um mobile Apps nativ zu erstellen. Wie beurteilen Sie diese Entscheidung und wie steht es um das plattformübergreifende HTML5-Ökosystem?

Als Mark Zuckerberg 2012 herauskam und sagte, HTML5 sei noch nicht fertig, widersprach Sencha ihm rundheraus und eine App namens Fastbook erstellt, das im Wesentlichen die eigentliche Facebook-App mit HTML5 umgeschrieben hat. In Bezug auf die Leistung hat Fastbook sogar die Facebook-Web-App auf dem iPhone geschlagen. Daher hat Sencha immer die Position vertreten, dass HTML5 bereit ist, die Leistungen zu erbringen, die Kunden und Benutzer erwarten.

Zugegeben, damals waren die Tools zum Erstellen von HTML5-Apps nicht so gut wie heute, die Geräte waren nicht so leistungsfähig und bestimmte Implementierungen der HTML5-Spezifikation waren es nicht erst vor wenigen Wochen von der W3C-Gruppe ratifiziert.

Jetzt ist das Ökosystem für HTML5 weitaus besser als zuvor, aber trotzdem glaubt Sencha, dass Facebooks Begründung für den Rückzug aus HTML5 nicht auf der Wahrheit basiert. Andererseits wird sich Sencha weiterhin voll und ganz dem HTML5-Ökosystem verschreiben, und jedes Sencha-Produkt basiert auf oder unterstützt die Webentwicklung.

Wenn Sie schließlich selbst sehen möchten, wie Sencha Ext JS funktioniert, können Sie dies tun Probieren Sie es 30 Tage lang kostenlos aus.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *