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.