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.