Ext.js - Erstes Programm

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

Schritt 1

Erstellen Sie eine index.htm-Seite im 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://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

Erläuterung

  • Die Ext.onReady () -Methode wird aufgerufen, sobald Ext JS bereit ist, die Ext JS-Elemente zu rendern.

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

  • Ext.Panel ist die in Ext JS vordefinierte Klasse zum Erstellen eines Panels.

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

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

  • renderToist das Element, in dem dieses Bedienfeld gerendert werden muss. 'helloWorldPanel' ist die Div-ID in der Datei Index.html.

  • Height und width Eigenschaften dienen zum Anpassen der Größe des Panels.

  • 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 im Browser.