O'Reilly logo

Sencha Touch 2 Mobile JavaScript Framework by Bryan P. Johnson, John Earl Clark

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

XTemplates

As we have seen from a number of previous examples, XTemplate is a structure that contains HTML layout information and placeholders for our data.

So far we have only created very basic templates for our list and panel using the data values and a bit of HTML. In our first example, we learned how to use the + operator to allow us to take a very long string and break it up into smaller strings for readability. Another way to do this is to set these templates up as separate components:

var myTemplate = new Ext.XTemplate(
  '{first} {last}<br>',
  '{address}<br>',
  '{city}, {state} {zip}<br>',
  '{email}<br>',
  '{birthday}'
);

This will create a template that looks exactly like what we had before. This is the way most examples on the Sencha Touch website ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required