Analizando el inicio con Sencha

Bueno, ya estoy de vuelta después de terminar con los exámenes de junio que terminé en mayo.. En el último post hablábamos sobre la creación de una aplicación basada en Sencha Touch 2.x que ya habíamos creado mediante la consola y nos disponíamos a analizar.

welcometosenchatouch

 

Ahora, tal y como dice la primera pantalla que nos encontramos, analizaremos el archivo que se encuentra en “app/view/Main.js”. Quiero aclarar una cosa antes de proseguir:

Sencha Touch usa un “modelo vista controlador” aka MVC , esto quiere decir que se separan las funcionalidades, de los controladores y de las vistas “físicas” sin mezclar código. Para obtener más información hay un muy buen artículo en Wikipedia.

Manos a la obra. Abrimos con nuestro editor de texto favorito el archivo Main.js que se indica más arriba y nos encontramos lo siguiente:

mainjs

Al principio al ver un código así puede asustar bastante pero ahora veremos que no es tanto realmente. Vemos un código muy bien estructurado aunque de momento nos centramos en el item “items” que se encuentra dentro de config.

Como podemos observar dentro de items hay dos elementos { primer elemento } , { segundo elemento }. Esto representa las pantallas que tiene nuestra aplicación. Para realizar un ejemplo práctico vamos a copiar el siguiente código y pegarlo ANTES de la primera llave dentro de “items” ( como se muestra en la imagen de abajo ).

{
   title: '¡Probando!',
   iconCls: 'star',
   styleHtmlContent: true,
   scrollable: true,
   items: {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Pantalla de Prueba'
   },
   html: [ "Añadiendo una pantalla más ^__^" ]
},

Vamos a analizar un poco más lo que significa cada cosa.

  • title: Es el texto que muestra en el botón en la barra de navegación
  • iconCls: Es el icono que se mostrará en la barra de navegación para esta pestaña. ( Abajo del todo se puede encontrar una referencia a todos los iconos que hay ). En este caso será una estrella.
  • styleHtmlContent : Indica si se seguirá el estilo por defecto de los paneles
  • scrollable: Significa que se podrá hacer scroll en la pantalla
  • items: Este “items” hace referencia a la barra de título
    • docked: Indica la posición de la barra de título
    • xtype: Indica el tipo, en este caso es ‘titlebar’ para indicar que es una barra de título
    • title: Es el título que aparece en la pantalla
  • html: Es el contenido html que se mostrará en la pantalla.

captura_pantallanueva

 

En la próxima entrega veremos más xtype y empezaremos a planear una aplicación a desarrollar.

¡Hasta pronto!

Listado de Iconos del iconCls ( obtenida de AlvinAlexander )

action
add
arrow_down
arrow_left
arrow_right
arrow_up
bookmarks
compose
delete
download
favorites
home
info
locate
maps
more
organize
refresh
reply
search
settings
star
team
time
trash
user

1 comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *