Sencha Touch - pierwszy program

W tym rozdziale wymienimy kroki, jakie 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://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>

Wyjaśnienie

Metoda Ext.application () jest punktem wyjścia dla aplikacji Sencha Touch. Tworzy zmienną globalną o nazwie „Sencha” zadeklarowaną z właściwością name - wszystkie klasy aplikacji, takie jak modele, widoki i kontrolery, będą znajdować się w tej jednej przestrzeni nazw, co zmniejsza ryzyko kolizji zmiennych globalnych i nazw plików.
launch () jest wywoływana po przygotowaniu strony i załadowaniu wszystkich plików JavaScript.
Metoda Ext.create () służy do tworzenia obiektu w Sencha Touch. Tutaj tworzymy obiekt z prostego panelu klasy Ext.tab.Panel.
Ext.tab.Panel to predefiniowana klasa w Sencha Touch do tworzenia panelu.
Każda klasa Sencha Touch ma inne właściwości do wykonywania podstawowych funkcji.

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

fullscreen ma wykorzystywać cały ekran, dlatego panel zajmie miejsce na pełnym ekranie.
items właściwość jest pojemnikiem na różne przedmioty.
iconCls to klasa używana do wyświetlania różnych ikon.
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 otrzymasz następujące dane wyjściowe.