Sencha Touch - Erstes Programm

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.