Ext.js - Primo programma

Questo capitolo elenca i passaggi per scrivere il primo programma Hello World in Ext JS.

Passo 1

Crea una pagina index.htm nell'editor di nostra scelta. Includere i file di libreria richiesti nella sezione principale della pagina html come segue.

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>

Spiegazione

Il metodo Ext.onReady () verrà chiamato una volta che Ext JS è pronto per il rendering degli elementi Ext JS.
Il metodo Ext.create () viene utilizzato per creare un oggetto in Ext JS. Qui stiamo creando un oggetto di semplice pannello di classe Ext.Panel.
Ext.Panel è la classe predefinita in Ext JS per la creazione di un pannello.
Ogni classe Ext JS ha proprietà diverse per eseguire alcune funzionalità di base.

La classe Ext.Panel ha varie proprietà come:

renderToè l'elemento su cui questo pannello deve renderizzare. "helloWorldPanel" è l'id div nel file Index.html.
Height e width le proprietà servono per personalizzare la dimensione del pannello.
Title proprietà è fornire il titolo al pannello.
Html proprietà è il contenuto html da mostrare nel pannello.

Passo 2

Apri il file index.htm in un browser standard e otterrai il seguente output sul browser.