Sencha Touch - Kurzanleitung

Sencha Touch ist ein beliebtes Framework von Sencha zum Erstellen einer Benutzeroberfläche für mobile Anwendungen. Es hilft dem Entwickler, eine mobile App mit einfachem HTML, CSS und JS zu erstellen, die viele mobile Geräte wie Android, IOS, BlackBerry und Windows unterstützt. Es basiert auf der MVC-Architektur. Die neueste Version von Sencha Touch ist 2.4.

Geschichte von Sencha Touch

Nach der Veröffentlichung von Senchas anderem Produkt ExtJs für Webanwendungen musste ein Framework entwickelt werden, das auch auf Mobilgeräten funktioniert.

Die erste Version von Sencha Touch war die Beta-Version 0.9, die Android- und IOS-Geräte unterstützte. Später war die erste Hauptversion von Sencha Touch Version 1.0 im November 2010, der ersten stabilen Version, die auch Blackberry-Geräte unterstützte.

Die neueste Version von Sencha Touch ist die im Juni 2015 veröffentlichte Version 2.4, die viele Geräte wie Windows, Tizen sowie Android, IOS, BlackBerry OS 10, Google Chrome für Android und mobile Safari usw. unterstützt.

Eigenschaften von Sencha Touch

Im Folgenden sind die wichtigsten Funktionen von Sencha Touch aufgeführt:

  • Anpassbare und mehr als 50 integrierte UI-Widgets mit einer Sammlung umfangreicher Benutzeroberflächen wie Listen, Karussells, Formulare, Menüs und Symbolleisten, die speziell für mobile Plattformen erstellt wurden.

  • Code-Kompatibilität neuer Versionen mit der älteren.

  • Ein flexibler Layout-Manager, mit dem die Anzeige von Daten und Inhalten auf mehreren Mobilgeräten mit unterschiedlichen Betriebssystemen organisiert werden kann.

  • Das Framework enthält ein robustes Datenpaket, das Daten aus jeder Backend-Datenquelle verwenden kann.

  • Adaptive Layouts, Animationen und flüssiges Scrollen für ein besseres mobiles Webanwendungserlebnis.

  • Mit sofort einsatzbereiten, nativ aussehenden Themen für jede wichtige Plattform können Web- und Hybridanwendungen an das Erscheinungsbild der Zielplattformen angepasst werden.

Sencha Touch ─ Vorteile

Sencha Touch ist der führende Standard für die Entwicklung von Webanwendungen für Unternehmen. Es bietet die Tools, die zum Erstellen robuster Anwendungen für die meisten Mobilgeräte erforderlich sind, und bietet eine einzige Plattform für die Entwicklung von Anwendungen. Im Folgenden sind einige der Vorteile aufgeführt:

  • Bietet eine reaktionsschnelle Touch-Funktion, sodass der Benutzer problemlos mit der mobilen App navigieren kann.

  • Bietet Kompatibilität mit den neuesten Versionen von IOS, Android und Blackberry sowie Windows.

  • Bietet die schnellstmögliche Geschwindigkeit, die für jede mobile Anwendung wünschenswert ist.

  • Bietet eine kostengünstige Lösung mit plattformübergreifender Kompatibilität.

  • Basierend auf den nativen APIs und grundlegenden Webentwicklungssprachen wie HTML, CSS und JS, die es Entwicklern erleichtern, Sencha Touch zu verstehen.

Sencha Touch ─ Einschränkungen

Die Sencha Touch API verfügt nicht über die folgenden Funktionen:

  • Die App hat keinen Zugriff auf die Kamera, die Kontakte und den Beschleunigungsmesser des Geräts.

  • Die Push-Benachrichtigungsfunktion wird nicht bereitgestellt. Dafür müssen wir Websockets oder Long Polling verwenden.

  • Gemäß den allgemeinen Richtlinien für öffentliche Lizenzen ist es für Open Source-Anwendungen kostenlos, wird jedoch für kommerzielle Anwendungen bezahlt.

  • Es ist nicht gut für Hardcore-Grafik- und Animations-Apps wie Gaming-Apps.

Sencha Touch ─ Werkzeuge

Sencha SDK

Dies ist das Sencha-Entwicklungskit, mit dem ein Skelett des Projekts erstellt wird. Wir verwenden den Befehl "sencha -sdk Pfad / to / touch App AppName generieren", um eine App mit dem im Befehl angegebenen Namen zu erstellen.

Wenn die App erstellt wird, sehen Sie die folgenden Dateien in der App:

  • app - Dieser Ordner enthält Modell-, Ansichts-, Controller- und Speicherdateien für die App.

  • app.js- Dies ist die Haupt-JS-Datei für Ihre Anwendung. Ab dieser Datei startet der Sencha-Code-Fluss.

  • app.json - Dies ist die Konfigurationsdatei für die App. Alle Konfigurationsdetails finden Sie hier.

  • index.html - Dies ist die Haupt-HTML-Datei, in die wir die app.js und andere Sencha-bezogene Dateien aufnehmen.

  • package.json - Diese Datei enthält alle Abhängigkeiten und sonstigen Informationen zur App.

  • resources - Dieser Ordner enthält alle für die Anwendung erforderlichen CSS-Dateien und Bilder.

Sencha CMD

Sencha CMD ist ein Befehlszeilentool, das die Funktionen der Sencha Touch-Code-Minimierung, des Gerüsts, der Build-Generierung und anderer nützlicher Funktionen für Produktionszwecke bietet.

Wir verwenden den Befehl "Sencha App Build Package" in der Eingabeaufforderung, um die Anwendung dafür zu erstellen. Wechseln Sie in das App-Verzeichnis an der Eingabeaufforderung und geben Sie den obigen Befehl ein. Sobald der Build erfolgreich ist, wird die verkleinerte Version der Anwendung angezeigt, die hauptsächlich für Produktionszwecke verwendet wird.

Dies kann von heruntergeladen werden https://www.sencha.com/products/extjs/cmd-download/

Sencha Inspector

Sencha Inspector ist ein Debugging-Tool zum Debuggen von Problemen im Sencha-Code während der Entwicklung.

Einrichtung der lokalen Umgebung

In diesem Abschnitt erfahren Sie, wie Sie Sencha Touch auf Ihren Computer herunterladen und einrichten. Befolgen Sie die Schritte zum Einrichten der Umgebung.

Herunterladen von Bibliotheksdateien

Laden Sie eine kommerzielle Version der Sencha Touch-Bibliotheksdateien über den folgenden Link herunter https://www.sencha.com. Sie erhalten die Testversion von der Website unter Ihrer registrierten E-Mail-ID, bei der es sich um einen komprimierten Ordner mit dem Namen sencha-touch-2.4.2-commercial handelt.

Entpacken Sie den Ordner und Sie finden verschiedene JavaScript- und CSS-Dateien, die Sie in Ihre Anwendung aufnehmen können. Fügen Sie hauptsächlich die folgenden Dateien hinzu:

Javascript Files - JS-Datei, die Sie unter Ordner \ sencha-touch-2.4.2commercial \ touch-2.4.2 finden, sind -

Sr.Nr. Dateibeschreibung
1

sencha-touch.js

Dies ist die Kerndatei, die alle Funktionen zum Ausführen der Anwendung enthält.

2

sencha-touch-all.js

Diese Datei enthält den gesamten minimierten Code ohne Kommentare in der Datei.

3

sencha-touch-debug.js

Dies ist die nicht minimierte Version von sencha-touch-all.js für Debugging-Zwecke.

4

sencha-touch-all-debug.js

Diese Datei ist ebenfalls nicht minimiert und wird für Entwicklungszwecke verwendet, da sie alle Kommentare und Konsolenprotokolle enthält, um Fehler / Probleme zu überprüfen.

Sie können diese Dateien zu Ihrem Projekt-JS-Ordner hinzufügen oder einen direkten Pfad angeben, in dem sich die Dateien in Ihrem System befinden.

CSS Files - Es gibt eine Reihe von themenbasierten Dateien, die Sie unter Ordner I finden: \ sencha touch \ sencha-touch-2.4.2-kommerziell \ touch-2.4.2 \ resources \ css \ sencha-touch.css

Diese Bibliotheksdateien werden in der Sencha Touch-Anwendung wie folgt hinzugefügt:

<html>
   <head>
      <script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>  
      <link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

Sie können den Sencha Touch-Anwendungscode in der Datei app.js behalten.

CDN-Setup

CDN ist ein Content Delivery-Netzwerk, mit dem Sie die Sencha Touch-Bibliotheksdateien nicht herunterladen müssen. Stattdessen können Sie Ihrem Programm wie folgt direkt einen CDN-Link für ExtJS hinzufügen:

<html>
   <head>
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>    
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

Beliebte Redakteure

Da es sich um ein JavaScript-Framework handelt, das für die Entwicklung von Webanwendungen verwendet wird, verfügt das Projekt über HTML- und JS-Dateien. Zum Schreiben Ihrer Ext JS-Programme benötigen Sie einen Texteditor. Auf dem Markt sind mehrere IDEs verfügbar. Im Moment können Sie jedoch eine der folgenden Möglichkeiten in Betracht ziehen:

  • Notepad - Auf einem Windows-Computer können Sie einen einfachen Texteditor wie Notepad (für dieses Lernprogramm empfohlen) und Notepad ++ verwenden.

  • Brackets - Eine weitere beliebte IDE, die von heruntergeladen werden kann http://brackets.io/ .

  • Sublime - Eine weitere beliebte IDE, die von heruntergeladen werden kann https://www.sublimetext.com/3/ .

Naming conventionist eine Reihe von Regeln, die für Bezeichner befolgt werden müssen. Dadurch ist der Code auch für andere Programmierer leicht lesbar und verständlich.

Die Namenskonvention in Sencha Touch folgt der Standard-JavaScript-Konvention, die nicht obligatorisch ist, aber eine gute Vorgehensweise ist. Es sollte der Camel-Groß- / Kleinschreibung folgen, um die Klasse, Methode, Variable und Eigenschaften zu benennen.

Wenn der Name mit zwei Wörtern kombiniert wird, beginnt das zweite Wort immer mit einem Großbuchstaben. Zum Beispiel doLayout (), StudentForm, firstName usw.

Sr.Nr. Name & Konvention
1

Class Name

Es sollte mit einem Großbuchstaben beginnen, gefolgt von einem Kamelkasten. Zum Beispiel StudentClass

2

Method Name

Es sollte mit einem Kleinbuchstaben beginnen, gefolgt von einem Kamelbuchstaben. Zum Beispiel studentMethod ()

3

Variable Name

Es sollte mit einem Kleinbuchstaben beginnen, gefolgt von einem Kamelbuchstaben. Zum Beispiel studentName

4

Constant Name

Es sollte nur in Großbuchstaben geschrieben werden. Zum Beispiel COUNT, MAX_VALUE

5

Property Name

Es sollte mit einem Kleinbuchstaben beginnen, gefolgt von einem Kamelbuchstaben. Zum Beispiel enableColumnResize = true

Die unterste Ebene für jede mobile Anwendung ist das Betriebssystem. Darüber hinaus wird alles oder jedes erstellt. Dann haben wir die Browser, auf denen wir die Anwendungen ausführen werden. Es könnte Chrome, Safari, IE alles sein. Die obere Schicht ist ein W3-Standard, der allen gemeinsam ist. Sencha Touch steht oder basiert auf W3-Standards, die nichts anderes als HTML5 sind. Dadurch ist eine einzelne Anwendung mit verschiedenen Browsern verschiedener Geräte kompatibel.

Sencha Touch ist eine Kombination aus drei Frameworks - ExtJs, JqTouch und Raphael (Vektorzeichnung). Es folgt der MVC-Architektur. MVC unterteilt den Code in besser verwaltbare Abschnitte.

Obwohl die Architektur für das Programm nicht obligatorisch ist, empfiehlt es sich, diese Struktur zu befolgen, um Ihren Code in hohem Maße wartbar und organisiert zu machen.

Projektstruktur mit Sencha Touch App

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Der Sencha Touch-App-Ordner befindet sich im JavaScript-Ordner Ihres Projekts.

Die App enthält Controller-, Ansichts-, Modell-, Speicher- und Dienstprogrammdateien mit app.js.

app.js- Die Hauptdatei, von der aus der Programmablauf beginnt. Es sollte mit dem <script> -Tag in die Haupt-HTML-Datei aufgenommen werden. App ruft den Controller der Anwendung für den Rest der Funktionalität auf.

Controller.js- Dies ist die Controller-Datei der Sencha Touch MVC-Architektur. Dies enthält die gesamte Steuerung der Anwendung, die Ereignis-Listener und die meisten Funktionen des Codes. Es führt die folgenden Aufgaben aus: Routing, Zwischenansicht zwischen Ansicht und Modell, und führt Ereignisse aus.

View.js- Es enthält den Schnittstellenteil der Anwendung, der dem Benutzer angezeigt wird. Sencha Touch verwendet verschiedene UI-Rich-Ansichten, die je nach Anforderung erweitert und angepasst werden können.

Store.js- Es enthält die lokal zwischengespeicherten Daten, die mit Hilfe von Modellobjekten angezeigt werden sollen. Store ruft die Daten mithilfe von Proxys ab, wobei der Pfad für Dienste zum Abrufen der Backend-Daten definiert ist.

Model.js- Es enthält die Objekte, die die anzuzeigenden Speicherdaten binden. Es ist die Darstellung des realen Objekts, die sich im Wesentlichen mit der Datenbank befasst.

Utils.js- Es ist nicht in der MVC-Architektur enthalten, es wird jedoch empfohlen, dies zu verwenden, um den Code sauber, weniger komplex und lesbarer zu machen. Wir können Methoden in diese Datei schreiben und sie bei Bedarf im Controller oder View Renderer aufrufen. Dies ist auch für die Wiederverwendbarkeit von Code hilfreich.

MVC steht für Model View Controller. Es ist ein Architekturmuster, das die Anwendung in logische Komponenten unterteilt, um sie übersichtlicher zu gestalten.

Das folgende Diagramm zeigt, wie die MVC-Architektur funktioniert -

Controller - Der Controller steuert die gesamte Anwendung und benachrichtigt die Ansicht, wenn das Modell geändert wird, und führt Aktionen basierend auf Benutzereingaben aus.

View- Es enthält den Schnittstellenteil der Anwendung, der für den Benutzer visuell ist. Es benachrichtigt den Controller, das Modell bei Benutzereingaben zu ändern.

Model- Es enthält die Objekte, die die anzuzeigenden Speicherdaten binden. Es ist eine Darstellung des realen Objekts, das sich im Wesentlichen mit der Datenbank befasst. Außerdem wird der Controller über jede Änderung der Ansicht informiert.

In diesem Kapitel werden die Schritte zum Schreiben des ersten Hello World-Programms in Ext JS aufgelistet.

Schritt 1

Erstellen Sie eine index.htm-Seite in einem Editor unserer Wahl. Fügen Sie die erforderlichen Bibliotheksdateien wie folgt in den Kopfbereich der HTML-Seite ein.

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Erläuterung

  • Die Ext.application () -Methode ist der Ausgangspunkt der Sencha Touch-Anwendung. Es wird eine globale Variable namens 'Sencha' erstellt, die mit der Eigenschaft name deklariert ist. Alle Klassen der Anwendung, wie z. B. Modelle, Ansichten und Controller, befinden sich unter diesem einzigen Namespace, wodurch die Wahrscheinlichkeit verringert wird, dass globale Variablen und Dateinamen kollidieren.

  • Die Methode launch () wird aufgerufen, sobald die Seite fertig ist und alle JavaScript-Dateien geladen sind.

  • Die Methode Ext.create () wird verwendet, um ein Objekt in Sencha Touch zu erstellen. Hier erstellen wir ein Objekt der einfachen Panelklasse Ext.tab.Panel.

  • Ext.tab.Panel ist die in Sencha Touch vordefinierte Klasse zum Erstellen eines Panels.

  • Jede Sencha Touch-Klasse verfügt über unterschiedliche Eigenschaften, um einige grundlegende Funktionen auszuführen.

Die Ext.Panel-Klasse verfügt über verschiedene Eigenschaften wie -

  • fullscreen Die Eigenschaft besteht darin, einen vollständigen Bildschirm zu verwenden, daher nimmt das Bedienfeld den gesamten Bildschirmbereich ein.

  • items Eigenschaft ist der Container für verschiedene Elemente.

  • iconCls ist die Klasse, die zum Anzeigen verschiedener Symbole verwendet wird.

  • title Eigenschaft ist, den Titel für das Panel bereitzustellen.

  • html Eigenschaft ist der HTML-Inhalt, der im Bedienfeld angezeigt werden soll.

Schritt 2

Öffnen Sie die Datei index.htm in einem Standardbrowser und Sie erhalten die folgende Ausgabe.

Die heutige Nachfrage nach einer Webanwendung besteht darin, eine schnelle Anwendung mit weniger Entwicklungsaufwand zu entwickeln. Sencha Touch hilft dabei auf einfache Weise, da es eine Reihe von Build-Bibliotheken zur Auswahl bietet, die auf dem Entwicklungs- oder Produktionscode basieren, sowie die Möglichkeit, einen benutzerdefinierten Build zu erstellen.

Sencha Touch Build-Bibliotheken laden die Klassen dynamisch. Dynamisches Laden steht für die Klassen, die bei Bedarf geladen werden, und es werden nur die Klassen aufgenommen, die in der Anwendung erforderlich sind. Dadurch wird die Anwendung schneller ausgeführt, da sich die Anzahl der zu ladenden Dateien verringert und gleichzeitig die Ladezeit verkürzt.

Sencha Touch 2.x bietet die folgenden fünf Build-Bibliotheken.

Sr.Nr. Builds & Nutzung
1

sencha-touchdebug.js

Dieser Build wird bei der lokalen Entwicklung der Anwendung verwendet. Es ist eine nicht minimierte Version mit allen Kommentaren und Debug-Protokollen für ein einfaches Debuggen während der Entwicklung.

2

senchatouch.js

Diese Datei wird zu Produktionszwecken verwendet. Es ist die minimierte Version, wenn wir einen benutzerdefinierten Build haben.

3

sencha-touchall.js

Diese Datei wird zu Produktionszwecken verwendet. Dies ist die minimierte Version, wenn wir keinen benutzerdefinierten Build haben.

4

sencha-touchall-debug.js

Diese Datei wird zum Debuggen in der Produktion verwendet. Es wird nicht minimiert und enthält alle Kommentare und Debug-Protokolle.

5

sencha-touchall-compat.js

Dieser Build wird verwendet, um die Version 1.x auf Version 2.x zu migrieren. Es gibt eine Warnung aus, wenn Code der Version 1.x nicht kompatibel ist und eine Codeänderung erforderlich ist.

Mit den oben genannten Builds bietet Sencha Touch die Möglichkeit, benutzerdefinierte Builds zu erstellen.

Vorteile eines benutzerdefinierten Builds

Beim benutzerdefinierten Build werden nicht alle Touch-Dateien geladen. Es werden nur die Dateien geladen, die wir in der Anwendung verwenden, wodurch die Anwendung schneller und einfacher zu warten ist.

Sencha CMD wird verwendet, um einen benutzerdefinierten Build zu erstellen. Um einen benutzerdefinierten Build in Sencha CMD zu erstellen, wechseln Sie in das Verzeichnis, in dem sich die App-Datei befindet, und geben Sie einen der folgenden Befehle ein, um einen Build zu erstellen.

Sr.Nr. Befehl & Verwendung
1

sencha app build native

Erstellt die App und bereitet eine Datei mit dem Namen packager.temp.json vor, mit der Sie eine Anwendung packen können. Packager.temp.json ist identisch mit packager.json, enthält jedoch zusätzliche Pfade.

2

sencha app build -run native

Erstellt und packt die Anwendung automatisch und startet den entsprechenden Simulator.

3

sencha app build package

Erstellt die App mit Paketunterstützung, konfiguriert jedoch keine Packager-JSON-Datei. Dies ist nützlich für Projekte, die mehrere packager.json-Dateien manuell verwalten.

Sobald der Build erfolgreich ist, generiert er die Datei all-classes.js, die wir in unsere index.html aufnehmen müssen, um die Produktion vorzubereiten.

Der folgende Code zeigt die Änderungen, die für den produktionsbereiten Code vorgenommen werden müssen.

Index.html before building application

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

Index.html after building the application

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

Sencha Touch wird mit verschiedenen Korrekturen aus der früheren Version geliefert.

Sencha Touch 2 wird mit der Abwärtskompatibilität geliefert, die den Migrationsprozess von Version 1.x auf 2.x erleichtert.

Dieser Build erleichtert lediglich die Arbeit, indem eine Warnung und die Protokolle bereitgestellt werden, wenn ein Migrationsproblem auftritt oder eine Codeänderung erforderlich ist, sodass der Benutzer weiß, wo die Änderungen erforderlich sind, um sicherzustellen, dass die Anwendung mit der neuesten Version funktioniert.

Die Sencha Touch 2.x-Migration erfordert die folgenden Codeänderungen.

Klassensystem

Code in Sencha Touch 1.x - -

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Code in Sencha Touch 2.x - -

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

Wenn Sie sich beide Versionen ansehen, können Sie sehen, dass die Art und Weise, wie Klassen erstellt werden, Änderungen sind, die jetzt von ExtJs wie - inspiriert sind.

  • Ext.extend wird in Ext.define geändert.

  • Alle Konfigurationsparameter, die sich auf die Klasse beziehen, werden jetzt unter Konfigurationsparameter definiert.

  • Die initComponent wird in die Methode initialize () geändert.

  • In Sencha Touch 2.x können die Funktionen setHtml () und getHtml () verwendet werden, um HTML zu aktualisieren oder den Wert abzurufen.

MVC-Architektur

Der Sencha Touch 1.x-Code war modular aufgebaut und basierte auf der MVC-Architektur. Sencha Touch 2.x folgt einer anderen Syntax zum Schreiben von Modell, Ansicht und Controller. Sehen wir uns den Unterschied zwischen Modell-, Ansichts- und Controller-Dateien in verschiedenen Versionen an.

Modell

Code in Sencha Touch 1.x - -

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Code in Sencha Touch 2.x - -

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModel wird in Ext.define geändert, wodurch Ext.data.Model erweitert wird.

Alle Felder befinden sich jetzt in der Version 2.x unter dem Abschnitt config.

Aussicht

Code in Sencha Touch 1.x - -

Ext.Panel("studentView", {
   items: [{}]
});

Code in Sencha Touch 2.x - -

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});

Die Ansicht ist fast identisch. Die einzige Änderung besteht darin, dass der Ansichtsname dem Namespace der 2.x-Version wie Myapp.view.StudentView folgt und der Code in der Ext.define-Methode wie im Modell geschrieben wird.

Regler

Code in Sencha Touch 1.x - -

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Code in Sencha Touch 2.x - -

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

Gleich wie Modell in Steuerung. Außerdem wird der Ext.regController in Ext.define geändert, wodurch Ext.app.Controller erweitert wird.

Anwendung

Code in Sencha Touch 1.x - -

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Code in Sencha Touch 2.x - -

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

   launch: function() {
      Ext.create('MyApp.view.Main');
   }
});

Der Hauptunterschied zwischen Version 1.x und Version 2.x besteht darin, dass in 2.x alle Modelle, Ansichten, Controller und Speicher in der Anwendung selbst deklariert werden.

Sencha Touch verfügt über verschiedene Kernkonzepte wie Klassensystem, Ajax, Controller usw.

In der folgenden Tabelle ist der Link für die Kernkonzepte von Sencha Touch aufgeführt.

Sr.Nr. Konzept & Beschreibung Link
1 Klassensystem
2 Komponenten
3 Controller
4 BlackBerry-Unterstützung
5 Verwendung von Ajax

Das Datenpaket in Sencha Touch ist für die Durchführung jeglicher Datenmanipulation verantwortlich, bei der die Daten gespeichert oder geladen werden.

Datenpakete beziehen sich auf Modell, Speicher und Proxys.

Sr.Nr. Konzept & Beschreibung Link
1

Model

Es ist die Sammlung von Daten und Feldern, mit denen wir alle Werte auf der Benutzeroberfläche anzeigen. Beschreibung

2

Store

Es ist eine Sammlung von Modellinstanzen, die die Daten grundsätzlich lokal speichern. Im Laden schreiben wir alle Ereignisse und Restaufrufe, um Daten zu erhalten. Beschreibung

3

Proxy

Es ist grundsätzlich für das Laden der Daten im Geschäft verantwortlich. Meistens verwenden wir Ajax-Proxy, um Speicherdaten zu laden. Beschreibung

Sencha Touch bietet eine Reihe von Themen, die in Ihren Anwendungen verwendet werden können. Sie können anstelle des klassischen Themas verschiedene Themen hinzufügen und den Unterschied in der Ausgabe basierend auf dem Gerät sehen, das wir für die Anwendung verwenden. Dies erfolgt einfach durch Ersetzen der Theme-CSS-Datei, wie im folgenden Beispiel erläutert.

Desktop-Thema

Betrachten Sie Ihre allererste Hello World-Anwendung. Das folgende CSS aus der Anwendung wird für das Desktop-Design verwendet.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

Windows-Design

Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Fügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

IOS-Thema

Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Fügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

IOS Classic Theme

Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Fügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden:

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

Android-Thema

Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Fügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

BlackBerry-Thema

Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Fügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

Versuchen Sie das folgende Programm, um den Effekt zu sehen:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Dies führt zu folgendem Ergebnis:

In der heutigen Welt der Technologien verfügen wir über mehrere Geräte wie Mobilgeräte, Tablets, Desktops und Laptops mit unterschiedlichen Bildschirmgrößen. Daher müssen Anwendungen entwickelt werden, auf die von allen Geräten mit gutem Erscheinungsbild zugegriffen werden kann. Das Entwickeln von unterschiedlichem Code für verschiedene Geräte ist jedoch sehr zeitaufwändig und kostspielig.

Sencha Touch hilft uns in dieser Hinsicht, indem es eine Geräteprofilfunktion anbietet. Basierend auf dem aktiven Profil werden die verschiedenen Abhängigkeiten ausgeführt und gelten.

Wir können das Geräteprofil deklarieren, während wir einen Anwendungscode schreiben. Wir können mehrere Geräte haben als -

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

Sobald dies erledigt ist, werden die Profile als - geladen

  • MyApp.profiles.Phone.js
  • MyApp.profiles.Tablet.js

Schreiben eines einfachen Telefonprofils

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

Schreiben eines einfachen Tablet-Profils

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

Wie wir im Profil sehen können, haben wir die Funktion isActive, die bestimmt, ob das bestimmte Gerät aktiv ist. Wenn das Gerät aktiv ist, werden die entsprechenden Abhängigkeiten geladen und instanziiert.

Wie im obigen Beispiel erwähnt, gibt die isActive-Funktion des Telefonprofils bei Verwendung eines Telefongeräts true zurück und die mit dem Telefongerät verbundenen Abhängigkeiten werden geladen. Hier wird phoneView geladen. Wenn es sich bei dem Gerät um ein Tablet handelt, gibt die isActive-Funktion des Telefonprofils false und die isActive-Funktion des Tablet-Profils true zurück und die Abhängigkeit tabletView wird geladen.

Prozess starten

Ein weiterer Punkt, der hier beachtet werden muss, ist, wenn wir Profile in der Anwendung haben, das Laden und Instanziieren des Anwendungscodes in der folgenden Reihenfolge erfolgt:

  • Controller werden zuerst instanziiert und die Init-Funktion jedes Controllers wird geladen.
  • Die Startfunktion des Profils wird aufgerufen.
  • Die Startfunktion der Anwendung wird aufgerufen.

Sowohl die Startfunktionen des Profils als auch der Anwendung sind optional. Wenn wir also keine definieren, werden sie nicht aufgerufen.

Sehen Sie sich den folgenden Code an, um zu überprüfen, wo und wie die verschiedenen Start- und Init-Funktionen definiert werden können.

Init-Funktion des Controllers

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

Startfunktion des Profils

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

Startfunktion der Anwendung

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});

In Sencha Touch sind bestimmte Möglichkeiten definiert, Abhängigkeiten zu deklarieren, eine innerhalb der Anwendung und die andere innerhalb der Klassen.

Schauen wir uns die verschiedenen Möglichkeiten an, Abhängigkeiten zu definieren.

Abhängigkeiten auf Anwendungsebene

Hier deklarieren wir alle Abhängigkeiten, wenn wir Ext.application erstellen.

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

Wenn die Anwendung geladen wird, werden jetzt alle Abhängigkeiten gleichzeitig geladen. Der Pfad der anderen Dateien lautet -

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStore usw.

Die obige Art der Deklaration lädt nicht nur die Datei, sondern entscheidet auch, welches Profil als aktiv beibehalten werden soll. Nach dem Laden des Controllers wird sichergestellt, dass dieser instanziiert wird. Sobald die Geschäfte geladen sind, werden sie instanziiert und es wird eine ID bereitgestellt, sofern diese nicht bereits angegeben wurde.

Profilspezifische Abhängigkeiten

Wenn wir Profile in einer Anwendung verwenden, besteht möglicherweise die Möglichkeit, dass nur für ein bestimmtes Profil nur wenige Funktionen erforderlich sind.

Profilspezifische Abhängigkeiten werden in den Profilen selbst anstelle der Deklaration auf Anwendungsebene deklariert.

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

Abhängigkeiten werden geladen, unabhängig davon, ob das Profil aktiv ist oder nicht. Basierend auf dem aktiven Profil erfolgt jedoch eine weitere Verarbeitung, z. B. das Instanziieren von Controllern und Speichern.

Verschachtelte Abhängigkeiten

Wenn wir eine größere Anwendung haben, haben wir mehrere Controller, Modelle, Ansichten und Speicher.

Bei größeren Anwendungen ist es immer gut, die Modularität beizubehalten. Dazu können wir Unterordner definieren und beim Deklarieren von Abhängigkeiten den Namen des Unterordners zum Deklarieren verwenden.

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

Im obigen Fall werden folgende Dateien geladen:

  • MyApp.controllers.Controller
  • MyApp.controllers.nested.NewController
  • MyApp.Views.Sview
  • MyApp.Views.class.Cview

Externe Abhängigkeiten

Wir können die Abhängigkeiten außerhalb der Anwendung angeben, indem wir vollständig qualifizierte Namen der Klassen als - angeben.

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

Im obigen Fall werden folgende Dateien geladen:

  • Class/view/LoginForm.js
  • Class/controller/Sessions.js
  • Class/model/User.js
  • app/view/Welcome.js
  • app/controller/Main.js

Es hilft Ihnen zu identifizieren, welches Betriebssystem Sie verwenden, an welchem ​​Browser Sie arbeiten und welche Funktionen für Ihre Umgebung verfügbar sind.

Sencha Touch bietet verschiedene Funktionen, um umgebungsspezifische Informationen abzurufen. Alle unten genannten Methoden können eingecheckt werden, wenn die Bedingung if (Ext.os.is.Windows) {} ist und auf den Bedingungsaufgaben basiert, die ausgeführt werden können.

Alle folgenden Methoden geben einen booleschen Wert zurück.

Betriebssystem

Ext.os ist eine Klasse, die Ihnen verschiedene Methoden bietet, um zu wissen, an welchem ​​Betriebssystem wir arbeiten.

Sr.Nr. Methode & Beschreibung
1

Ext.os.is.webOS

Diese Funktion gibt true zurück, wenn Sie das Betriebssystem webos verwenden. Andernfalls wird false zurückgegeben.

2

Ext.os.is.RIMTable

Diese Funktion gibt true zurück, wenn Sie das RIMTable-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

3

Ext.os.is.Linux

Diese Funktion gibt true zurück, wenn Sie ein Linux-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

4

Ext.os.is.Windows

Diese Funktion gibt true zurück, wenn Sie das Windows-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

5

Ext.os.is.MacOs

Diese Funktion gibt true zurück, wenn Sie ein Mac-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

6

Ext.os.is.BlackBerry

Diese Funktion gibt true zurück, wenn Sie das BlackBerry-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

7

Ext.os.is.iOS

Diese Funktion gibt true zurück, wenn Sie ein IOS-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

8

Ext.os.is.Android

Diese Funktion gibt true zurück, wenn Sie ein Android-Betriebssystem verwenden. Andernfalls wird false zurückgegeben.

Geräteerkennung

Sr.Nr. Methode & Beschreibung
1

Ext.os.is.iPad

Diese Funktion gibt true zurück, wenn Sie das iPad verwenden. Andernfalls wird false zurückgegeben.

2

Ext.os.is.iPhone

Diese Funktion gibt true zurück, wenn Sie das iPhone verwenden. Andernfalls wird false zurückgegeben.

3

Ext.os.is.iPod

Diese Funktion gibt true zurück, wenn Sie einen iPod verwenden. Andernfalls wird false zurückgegeben.

Version des Betriebssystems

Sr.Nr. Methode & Beschreibung
1

Ext.os.name

Es gibt den Namen des Betriebssystems zurück.

2

Ext.os.version.version

Es gibt die Version des Betriebssystems an, das wir verwenden.

Browsererkennung

Sr.Nr. Methode & Beschreibung
1

Ext.browser.is.IE

Diese Funktion gibt true zurück, wenn wir den Internet Explorer-Browser verwenden. Andernfalls wird false zurückgegeben.

2

Ext.browser.is.FF

Diese Funktion gibt true zurück, wenn wir den FireFox-Browser verwenden, andernfalls false.

3

Ext.browser.is.Chrome

Diese Funktion gibt true zurück, wenn wir den Chrome-Browser verwenden. Andernfalls wird false zurückgegeben.

4

Ext.browser.is.Opera

Diese Funktion gibt true zurück, wenn wir den Opera-Browser verwenden, andernfalls gibt sie false zurück.
5

Ext.browser.is.Safari

Diese Funktion gibt true zurück, wenn wir den Safari-Browser verwenden. Andernfalls wird false zurückgegeben.

Diese Funktion Ext.browser bietet verschiedene andere Funktionen -

Sr.Nr. Methode & Beschreibung
1

Ext.browser.userAgent

Es gibt den aktuellen userAgent zurück.

2

Ext.browser.isSecure

Es gibt true zurück, wenn die aktuelle Seite SSL verwendet.

3

Ext.browser.isStrict

Es gibt true zurück, wenn sich der Browser im strengen Modus befindet.

4

Ext.browser.engineName

Es gibt den Namen der Browser-Engine zurück (WebKit, Gecko, Presto, Trident und andere).

5

Ext.browser.engineVersion

Es gibt die Version der Browser-Engine zurück.

Eigenschaften

Ext.feature.has soll überprüfen, ob der Browser über folgende Funktionen verfügt oder nicht.

Sr.Nr. Methode & Beschreibung
1

Ext.feature.has.Audio

Diese Methode gibt true zurück, wenn der Browser die Audio-Tag-Funktion von HTML5 unterstützt.

2

Ext.feature.has.Canvas

Diese Methode gibt true zurück, wenn der Browser die Canvas-Tag-Funktion von HTML5 unterstützt.

3

Ext.feature.has.classList

Diese Methode gibt true zurück, wenn der Browser die Klassenlistenfunktion von HTML5 unterstützt, mit der CSS-Klassen für das HTML-Element hinzugefügt, entfernt und umgeschaltet werden.

4

Ext.feature.has.Css3dTransforms

Diese Methode gibt true zurück, wenn der Browser die Css 3d Transform-Funktion von css3 unterstützt.

5

Ext.feature.has.CssAnimations

Diese Methode gibt true zurück, wenn der Browser Animationen von CSS3 unterstützt.

6

Ext.feature.has.CssTransforms

Diese Methode gibt true zurück, wenn der Browser die CSS-Transformationsfunktion von CSS3 unterstützt.

7

Ext.feature.has.CssTransitions

Diese Methode gibt true zurück, wenn der Browser die Übergangsfunktion von css3 unterstützt.

8

Ext.feature.has.DeviceMotion

Diese Methode gibt true zurück, wenn der Browser die Gerätebewegungsfunktion unterstützt.

9

Ext.feature.has.Geolocation

Diese Methode gibt true zurück, wenn der Browser die Geolocation-Funktion von HTML5 unterstützt.

10

Ext.feature.has.History

Diese Methode gibt true zurück, wenn der Browser die Verlaufsfunktion von HTML unterstützt.

11

Ext.feature.has.Orientation

Diese Methode gibt true zurück, wenn der Browser die Ausrichtung des Geräts erkennen kann.

12

Ext.feature.has.OrientationChange

Diese Methode gibt true zurück, wenn der Browser eine Änderung der Ausrichtung des Geräts erkennen kann.

13

Ext.feature.has.Range

Range ist eine Art HTML-Eingabe-Tag für das Range-Slider-Element. Wenn der Browser den Slider unterstützt, gibt diese Funktion true zurück.

14

Ext.feature.has.SqlDatabase

Die Web-SQL-Datenbank ist eine Webseiten-API zum Speichern von Daten in einer Datenbank, für die Abfragevorgänge ausgeführt werden können. Diese Methode gibt true zurück, wenn der Browser die Web-SQL-Datenbank unterstützt.

15

Ext.feature.has.Svg

Svg steht für Scalable Vector Graphics. Diese Methode gibt true zurück, wenn der Browser die SVG-Funktion von HTML 5 unterstützt.

16

Ext.feature.has.Touch

Diese Methode gibt true zurück, wenn der Browser über die Touch-Funktion verfügt.

17

Ext.feature.has.Video

Diese Methode gibt true zurück, wenn der Browser HTML 5-Video-Tags unterstützt.

18

Ext.feature.has.Vml

Vml steht für Vector Markup Language, eine XML-basierte Markup-Sprache. Diese Methode gibt also true zurück, wenn der Browser vml unterstützt.

19

Ext.feature.has.WebSockets

Web Socket ist im Grunde ein Kommunikationsprotokoll für Computer, das zwei Kommunikationen zwischen Clients und Server unterstützt. Diese Methode gibt true zurück, wenn der Browser WebSockets unterstützt, andernfalls false.

Ereignisse werden ausgelöst, wenn der Klasse etwas passiert. Zum Beispiel, wenn auf eine Schaltfläche geklickt wird oder bevor / nachdem ein Element gerendert wurde.

Methoden zum Schreiben von Ereignissen

Im Folgenden finden Sie die Methoden zum Schreiben von Ereignissen.

  • Integrierte Ereignisse mit Listenern.
  • Ereignisse später anhängen
  • Benutzerdefinierte Ereignisse

Integrierte Ereignisse mit Listenern

Sencha Touch bietet Listener-Eigenschaften zum Schreiben von Ereignissen und benutzerdefinierten Ereignissen in Sencha Touch-Dateien.

Listener in Sencha Touch schreiben

Wir werden den Listener im vorherigen Programm selbst hinzufügen, indem wir dem Panel die Listen-Eigenschaft hinzufügen, die wie folgt dargestellt wird:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha', launch: function() {
               Ext.create('Ext.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script> 
   </head>
</html>

Dies führt zu folgendem Ergebnis:

Auf diese Weise können wir auch mehrere Ereignisse in die Listener-Eigenschaft schreiben.

Mehrere Ereignisse im selben Listener

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">   
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random() * 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });       
      </script> 
   </head>
</html>

Es wird das folgende Ergebnis erzeugt -

Ereignis später anhängen

In der vorherigen Methode zum Schreiben von Ereignissen haben wir Ereignisse zum Zeitpunkt der Erstellung von Elementen in Listener geschrieben.

Die andere Möglichkeit, Ereignisse anzuhängen, ist wie folgt:

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });
               
               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script> 
   </head>
</html>

Es wird das folgende Ergebnis erzeugt -

Benutzerdefinierte Ereignisse

Wir können benutzerdefinierte Ereignisse in Sencha Touch schreiben und die Ereignisse mit der fireEvent-Methode auslösen. Im folgenden Beispiel wird erläutert, wie Sie benutzerdefinierte Ereignisse schreiben.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script> 
   </head>
</html>

Sobald die Seite geladen und das Dokument bereit ist, wird die UI-Seite mit der Schaltfläche angezeigt. Wenn wir nach 5 Sekunden ein Ereignis auslösen, wird nach 5 Sekunden das Warnfeld angezeigt.

Hier haben wir das benutzerdefinierte Ereignis 'myEvent' geschrieben und lösen Ereignisse als button.fireEvent (eventName) aus.

Layout ist die Art und Weise, wie die Elemente in einem Container angeordnet sind. Das kann horizontal, vertikal oder anders sein. Sencha Touch hat verschiedene Layouts in seiner Bibliothek definiert, obwohl wir auch immer benutzerdefinierte Layouts schreiben können.

Sr.Nr. Layout & Beschreibung
1 hBox

Durch dieses Layout kann das Element horizontal verteilt werden.

2 vBox

Durch dieses Layout kann das Element vertikal verteilt werden. Dies ist eines der am häufigsten verwendeten Layouts.

3 Passen

In diesem Layout wird der Container mit einem einzelnen Feld gefüllt. Wenn für das Layout keine besonderen Anforderungen bestehen, wird dieses Layout verwendet.

4 Karte (TabPanel)

Dieses Layout ordnet verschiedene Komponenten in Registerkartenform an. Über dem Container werden Registerkarten angezeigt. Jedes Mal ist nur eine Registerkarte sichtbar und jede Registerkarte wird als eine andere Komponente betrachtet.

Sencha Touch bietet umfassende Unterstützung für den Verlauf und Deep Linking-Funktionen.

Es verfügt über die einfachste Funktion der Zurück-Schaltfläche, mit der der Benutzer zwischen den Bildschirmen navigieren kann, ohne die Seite oder Anwendung zu aktualisieren.

Es bietet auch Routenfunktionen, mit denen der Benutzer zu einer beliebigen URL navigieren kann. Basierend auf der im Browserfenster angegebenen URL werden bestimmte Funktionen aufgerufen, um eine bestimmte Aufgabe auszuführen.

Schauen Sie sich das folgende Beispiel für die Funktionalität der Zurück-Schaltfläche an.

In diesem Beispiel wird die verschachtelte Liste angezeigt, die nichts anderes als eine Liste in einer Liste ist. Wenn Sie also auf eines der Listenelemente klicken, wird eine weitere Liste geöffnet und oben auf dem Bildschirm wird eine Schaltfläche "Zurück" angezeigt.

Die vollständige Codebasis können Sie überprüfen Verschachtelte Liste im Abschnitt Komponenten anzeigen.

Routing

Einfachstes Beispiel für Routen

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

Wenn im obigen Beispiel die Browser-URL https://myApp.com/#login lautet, wird die Funktion showLogin aufgerufen.

Wir können Parameter in der URL angeben und basierend auf dem spezifischen Parameter kann die Funktion aufgerufen werden. Wenn die URL beispielsweise https://myApp.com/#user/3 lautet, wird die Benutzer-ID einer anderen Funktion aufgerufen und die spezifische ID kann innerhalb der Funktionen verwendet werden.

Weiteres Routing

Manchmal haben wir erweiterte Parameter, einschließlich Komma, Leerzeichen und Sonderzeichen usw., wenn wir die oben beschriebene Methode zum Schreiben von Routen verwenden, funktioniert dies nicht. Um dieses Problem zu lösen, bietet Sencha touch ein bedingtes Routing an, bei dem wir festlegen können, welche Art von Daten der Parameter akzeptieren soll.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Wie im obigen Beispiel haben wir Regex in der Bedingung angegeben, in der eindeutig angegeben ist, welcher Datentyp als URL-Parameter zulässig sein soll.

Gemeinsame URL für verschiedene Geräteprofile

Da Sencha touch ein Geräteprofil bereitstellt, sodass derselbe Anwendungscode auf mehreren Geräten verwendet werden kann, besteht die Möglichkeit, dass unterschiedliche Profile unterschiedliche Funktionen für dieselbe URL haben.

Um dieses Problem zu beheben, gibt uns Sencha touch die Freiheit, Routing in den Hauptcontroller zu schreiben und die aufgerufene Funktion in das gesamte Profil mit ihren profilspezifischen zu schreiben.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Wie das Beispiel zeigt, haben wir einen Hauptcontroller mit showLogin-Funktion und zwei verschiedene Profile (Telefon / Tablet). Beide Profile haben die Funktion showLogin mit unterschiedlichem Code, der für das Profil spezifisch ist.

Auf diese Weise können wir dieselbe URL für mehrere Profilgeräte mit ihren spezifischen Funktionen freigeben.

Sencha Touch bietet eine XHR2-Konfiguration für die Ajax- und Ajax2-Entwicklung.

XHR2 ist xmlHttpRequest Level 2, mit dem Daten vom Server angefordert wurden. Bei jeder Webanwendung befinden sich die Daten auf dem Server. Sobald die Seite geladen ist, sollte mithilfe von Ajax-Anforderungen vom Server aus auf die Daten zugegriffen werden.

XHR2 in Sencha Touch bietet die Fortschrittsbalkenfunktion, die dem Benutzer die Datenmenge anzeigt, die für eine bestimmte Anforderung übertragen wurde. XHR2 wurde neu hinzugefügt, daher müssen wir prüfen, ob der Browser dies unterstützt oder nicht.

Mit der folgenden Funktion können Sie überprüfen, ob der Browser XHR2 unterstützt.

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

Wir können sogar überprüfen, ob der progressive Upload mit XHR2 vom Browser unterstützt wird oder nicht.

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

In Sencha Touch sind verschiedene neue XHR2-Funktionen enthalten.

Sr.Nr. Funktionen & Beschreibung
1

XHR2: true

Dies wird verwendet, um die XHR2-Funktionalität in der Anwendung zu aktivieren und zu deaktivieren.

2

Ext.field.File

Ein neues Dateifeld wird hinzugefügt, um mehr Klarheit über den Feldtyp zu erhalten.

3

Ext.field.FileInput

Dies, um FileInput bereitzustellen.

4

Ext.progressIndicator

Hiermit wird der genaue Prozentsatz der übertragenen Daten in Bezug auf den Fortschrittsbalken angegeben.

5

xtype: fileinput

So erstellen Sie eine Instanz der fileInput-Klasse

6

xtype: filefield

So erstellen Sie eine Instanz der Dateiklasse.

7

responseType : value

Dieser Parameter ermöglicht verschiedene Arten von Antworten wie Text, Dokument, Blob usw.

Im Folgenden finden Sie Beispiele zum Senden einer einfachen Ajax-Anfrage mit und ohne Parameter und zum Hochladen von Dateien mit Ajax.

Einfache Ajax-Anfrage ohne Parameter - Erfolg

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Das obige Beispiel zeigt den erfolgreichen Ajax-Aufruf, da die angegebene URL korrekt ist. In diesem Beispiel übergeben wir keinen Parameter, sondern nur eine einfache Ajax-Anfrage, die auf die angegebene URL trifft.

Wenn Sie den Chrome-Browser im Entwicklertool verwenden, navigieren Sie zum Netzwerkbereich. Sie sehen die gesendete Anfrage und die Antwort, die wir erhalten.

Einfache Ajax-Anfrage ohne Parameter - Fehler

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Um zu zeigen, wie ein Ajax-Fehler funktioniert, haben wir im obigen Beispiel die falsche URL erwähnt. Vergleichen Sie dieses und das vorherige Beispiel, Sie werden den Unterschied finden.

Senden von Parametern in Ajax-Anfrage

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

In diesem Beispiel übergeben wir Parameter mit dem Ajax unter Verwendung der Dateneigenschaft des Ajax-Aufrufs.

Hochladen von Dateien mit Ajax

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Dieses Beispiel zeigt, wie Sie Daten mit einem Ajax-Aufruf hochladen. In diesem Beispiel verwenden wir die Fortschrittsanzeige, um den Fortschritt beim Hochladen der Datei anzuzeigen.

Sencha Touch bietet verschiedene UI-Komponenten, die je nach Bedarf angepasst werden können.

Sr.N0. Komponentenbeschreibung
1 Karussell

Diese UI-Komponente wird zum Anzeigen des Karussells verwendet.

2 Liste

Diese UI-Komponente wird zum Anzeigen von Listen verwendet.

3 Verschachtelte Liste

Diese UI-Komponente wird verwendet, um verschachtelte Listen anzuzeigen.

4 Bilden

Diese UI-Komponente wird zum Anzeigen von Formularen verwendet.

5 Diagramm

Diese UI-Komponente wird verwendet, um verschiedene Diagrammtypen anzuzeigen.

6 Schwimmende Komponente

Diese UI-Komponente wird zum Anzeigen der schwebenden Komponente verwendet.

7 Registerkarte

Diese UI-Komponente wird zum Anzeigen der Registerkartenansicht verwendet.

8 Navigationsansicht

Diese UI-Komponente wird zum Anzeigen der Navigationsansicht verwendet.

9 Aktionsmenü

Diese UI-Komponente wird zum Anzeigen der Aktionsmenüleiste verwendet.

10 Datenansicht

Diese UI-Komponente wird zum Anzeigen der Datenansicht verwendet.

11 Karte

Diese UI-Komponente wird zum Anzeigen von Google Map verwendet.

Sencha Touch verfügt über native Verpackungsfunktionen.

Im Folgenden finden Sie die Links für native Verpackungskonzepte von Sencha Touch.

Sr.Nr. Konzept & Beschreibung Link
1 Native iOS-Bereitstellung
2 Native APIs

Grundlegende bewährte Methoden für JavaScript

Es wird empfohlen, den gesamten JavaScript-bezogenen Code in einem separaten Code aufzubewahren js (external JS) Datei, anstatt es in die zu schreiben <script> Tag unter dem Kopfabschnitt oder Inline-JavaScript im Dokumentkörper.

Führen Sie immer eine Nullprüfung durch, bevor das Element in der weiteren Logik verwendet wird.

Befolgen Sie immer die Namenskonvention, da der Code für jeden anderen Programmierer leicht verständlich ist.

Um den Code leicht verständlich zu machen, wird es immer bevorzugt, Kommentare für JS-Methoden mit klarer Logik hinter der Funktionsweise einer Funktion zu schreiben.

Best Practice speziell für Sencha Touch

Verwenden Sie die von Sencha Touch empfohlene Ordnerstruktur, die bei der JS-Komprimierung oder -Minimierung hilfreich ist.

Es wird dringend empfohlen, den Listener (onclick / onblur usw.) im Controller zu verwenden, anstatt ihn auf der HTML-Seite selbst zu schreiben.

Erstellen Sie die Geschäftsinstanz nicht, wenn das Geschäft aus der Ansicht aufgerufen wird.

Wenn wir eine Instanz eines Geschäfts erstellen, sollten wir es immer zerstören, da dies die Leistung beeinträchtigt.

Geben Sie bei der Verwendung von Sencha Touch keine andere einfache JavaScript-Datei an. Verwenden Sie alle Funktionen aus Ext-Klassen (in Controller oder Utils erwähnt).

Wenn die Modellzuordnung und der Name identisch sind, geben Sie keine Zuordnung an. Nur der Name wird den Zweck lösen.

Verwenden Sie keine unnötigen Eigenschaften in der Ansicht. Verwenden Sie nur die erforderliche Eigenschaft und den vom Standardwert abweichenden Wert.