Ext.js - pierwszy program

Ten rozdział zawiera listę kroków, które należy wykonać, aby napisać pierwszy program Hello World w Ext JS.

Krok 1

Utwórz stronę index.htm w wybranym przez nas edytorze. Uwzględnij wymagane pliki biblioteki w sekcji head strony html w następujący sposób.

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>

Wyjaśnienie

Metoda Ext.onReady () zostanie wywołana, gdy Ext JS będzie gotowy do renderowania elementów Ext JS.
Metoda Ext.create () służy do tworzenia obiektu w Ext JS. Tutaj tworzymy obiekt prostego panelu klasy Ext.Panel.
Ext.Panel to predefiniowana klasa w Ext JS do tworzenia panelu.
Każda klasa Ext JS ma inne właściwości do wykonywania podstawowych funkcji.

Klasa Ext.Panel ma różne właściwości, takie jak -

renderToto element, w którym ten panel ma renderować. „helloWorldPanel” to identyfikator div w pliku Index.html.
Height i width właściwości służą do dostosowywania rozmiaru panelu.
Title właściwości jest podanie tytułu do panelu.
Html właściwość to zawartość HTML, która ma być wyświetlana w panelu.

Krok 2

Otwórz plik index.htm w standardowej przeglądarce, a w przeglądarce pojawi się następujący wynik.