Sencha Touch - Primo programma

In questo capitolo, elencheremo i passaggi per scrivere il primo programma Hello World in Ext JS.

Passo 1

Crea una pagina index.htm in un 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://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Spiegazione

  • Il metodo Ext.application () è il punto di partenza dell'applicazione Sencha Touch. Crea una variabile globale chiamata 'Sencha' dichiarata con la proprietà name: tutte le classi dell'applicazione come i suoi modelli, viste e controller risiederanno in questo singolo spazio dei nomi, il che riduce le possibilità di collisione tra variabili globali e nomi di file.

  • Il metodo launch () viene chiamato una volta che la pagina è pronta e tutti i file JavaScript sono stati caricati.

  • Il metodo Ext.create () viene utilizzato per creare un oggetto in Sencha Touch. Qui, stiamo creando un oggetto di semplice classe pannello Ext.tab.Panel.

  • Ext.tab.Panel è la classe predefinita in Sencha Touch per la creazione di un pannello.

  • Ogni classe Sencha Touch ha proprietà diverse per eseguire alcune funzionalità di base.

La classe Ext.Panel ha varie proprietà come:

  • fullscreen proprietà è quella di utilizzare uno schermo completo, quindi il pannello occuperà spazio a schermo intero.

  • items la proprietà è il contenitore di vari articoli.

  • iconCls è la classe utilizzata per visualizzare le diverse icone.

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