Sencha Touch - Premier programme

Dans ce chapitre, nous allons lister les étapes pour écrire le premier programme Hello World dans Ext JS.

Étape 1

Créez une page index.htm dans un éditeur de notre choix. Incluez les fichiers de bibliothèque requis dans la section head de la page html comme suit.

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>

Explication

La méthode Ext.application () est le point de départ de l'application Sencha Touch. Il crée une variable globale appelée 'Sencha' déclarée avec la propriété name - toutes les classes de l'application telles que ses modèles, vues et contrôleurs résideront sous cet espace de noms unique, ce qui réduit les risques de collision entre les variables globales et les noms de fichiers.
La méthode launch () est appelée une fois que la page est prête et que tous les fichiers JavaScript sont chargés.
La méthode Ext.create () est utilisée pour créer un objet dans Sencha Touch. Ici, nous créons un objet de classe de panneau simple Ext.tab.Panel.
Ext.tab.Panel est la classe prédéfinie dans Sencha Touch pour créer un panneau.
Chaque classe Sencha Touch a des propriétés différentes pour exécuter certaines fonctionnalités de base.

La classe Ext.Panel a diverses propriétés telles que -

fullscreen La propriété est d'utiliser un écran complet, le panneau occupera donc de l'espace en plein écran.
items property est le conteneur de divers articles.
iconCls est la classe utilisée pour afficher différentes icônes.
title la propriété est de fournir le titre au panneau.
html property est le contenu html à afficher dans le panneau.

Étape 2

Ouvrez le fichier index.htm dans un navigateur standard et vous obtiendrez la sortie suivante.