Sencha Touch - Primer programa

En este capítulo, enumeraremos los pasos para escribir el primer programa Hello World en Ext JS.

Paso 1

Cree una página index.htm en un editor de nuestra elección. Incluya los archivos de biblioteca requeridos en la sección de cabecera de la página html de la siguiente manera.

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>

Explicación

  • El método Ext.application () es el punto de partida de la aplicación Sencha Touch. Crea una variable global llamada 'Sencha' declarada con la propiedad name: todas las clases de la Aplicación, como sus Modelos, Vistas y Controladores, residirán bajo este espacio de nombres único, lo que reduce las posibilidades de colisión de variables globales y nombres de archivos.

  • Se llama al método launch () una vez que la página está lista y todos los archivos JavaScript están cargados.

  • El método Ext.create () se utiliza para crear un objeto en Sencha Touch. Aquí, estamos creando un objeto de clase de panel simple Ext.tab.Panel.

  • Ext.tab.Panel es la clase predefinida en Sencha Touch para crear un panel.

  • Cada clase Sencha Touch tiene diferentes propiedades para realizar algunas funcionalidades básicas.

La clase Ext.Panel tiene varias propiedades como:

  • fullscreen propiedad es hacer uso de una pantalla completa, por lo tanto, el panel ocupará el espacio de pantalla completa.

  • items La propiedad es el contenedor de varios elementos.

  • iconCls es la clase utilizada para mostrar diferentes iconos.

  • title propiedad es proporcionar el título al panel.

  • html propiedad es el contenido html que se mostrará en el panel.

Paso 2

Abra el archivo index.htm en un navegador estándar y obtendrá el siguiente resultado.