Plantillas

Las plantillas se utilizan para describir la disposición y la apariencia visual de los datos de nuestra aplicación. Nos proporcionan funcionalidad avanzada para poder procesarlos y darles formato, como: auto-procesado de arrays, condiciones, operaciones matemáticas, ejecución de código en línea, variables especiales, funciones, etc.

Para instanciar un template utilizamos el constructor "Ext.XTemplate( template )", donde template será una cadena con la definición del template a utilizar. Posteriormente podemos utilizar la función "overwrite(elemento, datos)" del template para aplicar un template con unos datos sobre un elemento dado. En la sección de "Visualización de datos" se detalla otra forma de aplicar un template en un panel.

Auto-procesado de arrays

Para crear un template que procese automáticamente un array se utiliza la etiqueta <tpl for="variable">plantilla</tpl>, teniendo en cuenta que:

• Si el valor especificado es un array se realizará un bucle por cada uno de sus elementos, repitiendo el código de la "plantilla" para cada elemento.

• La "plantilla" puede contener texto, etiquetas HTML y variables o elementos del array a sustituir.

• Las variables a sustituir se indican de la forma "{nombre_variable}", donde "nombre_variable" debe de corresponder con el nombre de uno de los elementos del array iterado.

• Mediante la variable especial {#} podemos obtener el índice actual del array.

• En la sección for="variable" de la plantilla se debe de indicar el nombre de la variable que contiene el array a procesar, de la forma:

  • Con <tpl for=".">...</tpl> se ejecuta un bucle a partir del nodo raíz.

  • Con <tpl for="foo">...</tpl> se ejecuta el bucle a partir del nodo "foo".

  • Con<tpl for="foo.bar">...</tpl> se ejecuta el bucle a partir del nodo "foo.bar"

Si por ejemplo tenemos el siguiente objeto de datos:

var myData = {
  name: 'Tommy Maintz',
  drinks: ['Agua', 'Café', 'Leche'],
  kids: [
    { name: 'Tomás', age:3 },
    { name: 'Mateo', age:2 },
    { name: 'Salomón', age:0 }
  ]
};

Podríamos mostrar un listado con el contenido de myData.kids indicando en la sección for="variable" que procese a partir de la raíz del array myData.kids:

var myTpl = new Ext.XTemplate(
  '<tpl for=".">',
    '<p>{#}. {name}</p>',
  '</tpl>' );

myTpl.overwrite(myPanel.element, myData.kids);

Si por ejemplo indicamos que se procese la variable "myData" y queremos obtener el mismo resultado, tendríamos que modificar el template para que se procese a partir del nodo "kids", de la forma <tpl for="kids">...</tpl>.

var myTpl = new Ext.XTemplate(
  '<tpl for="kids">',
    '<p>{#}. {name}</p>',
  '</tpl>' );

myTpl.overwrite(myPanel.element, myData);

Si el array solo contiene valores (en el objeto de datos de ejemplo, sería el array "drinks"), podemos usar la variable especial {.} dentro del bucle para obtener el valor actual:

var myTpl = new Ext.XTemplate(
  '<tpl for="drinks">',
    '<p>{#}. {.}</p>',
  '</tpl>' );

myTpl.overwrite(myPanel.element, myData);

Condiciones

Para introducir condiciones en las plantillas se utiliza la etiqueta <tpl if="condicion"> plantilla </tpl>. Hemos de tener en cuenta que: si utilizamos símbolos como las "<", ">" o las "comillas" deberemos escribirlos codificados: <, > o ", y que si usamos los operadores "elseif" o "else" tendremos que cerrar la plantilla al final.

Ejemplos:

<tpl if="age &lt; 10">
    Niño
<tpl elseif="age &gt= 10 && age &lt; 18">
    Adolescente
<tpl else>
    Adulto
</tpl>
<tpl if="name == &quot;Javi&quot;">¡Hola Javi!</tpl>

Visualización

Para renderizar el contenido de una plantilla sobre un panel (u otro elemento que lo soporte, como veremos más adelante), podemos usar la función "tpl.overwrite(elemento, datos)" que ya hemos usado en los ejemplos anteriores. O usar la propiedades "tpl" junto con "data", de la forma:

var myPanel = Ext.create('Ext.Panel', {
    data: myData,
    tpl: myTpl
});

// O también:
// myTpl.overwrite(myPanel.element, myData);