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.