ExtJS Шаблоны

var d=['Петров', 'Иван', 'Семенович'];
var tpl= new Ext.Template("<div class='domexample'><b>{0}</b> {1} {2}</div>");
tpl.append('ex1', d);
tpl.append('ex1',['Васнецов', 'Виктор', 'Анатольевич']);

В первой строке создается шаблон.
Во втрой строке находится элемент c id='ex1', куда будет вставлен результат работы шаблона.

Затем в шаблон подставляюся данные из массива.
{0} - первый элемент массива, {1} - второй и так далее.

Так же как и в PHP-шаблонизаторах типа Smarty для ускорения работы шаблонов в ExtJS их можно скомпилировать, то есть перевети в какой-то внутренний объект, с помощь которого парсинг будет выполняться быстрее.

tpl.compile(); // компиляция шаблона
tpl.append('ex2',['Бодров', 'Павел', 'Андреевич']);

Можно парсить не только массивы, но и литерально заданные объекты (JSON):

var tpl3=new Ext.Template("<div class='domexample'><b>{f}</b> {i} {o}</div>");
tpl3.append('ex3',{f:'Антонов', i:'Дмитрий', o:'Владимирович'});

В шаблонах также предусмотрены циклы.

var data = {
    text: 'Президиум',
    member: [
        {name: 'Путин В.В.', member: 'председатель партии «Единая Россия»',age:58},
        {name: 'Жириновский В.В.', member: 'Генеральный секретарь ЛДПР',age:68},
         {name: 'Зюганов В.В.', member: 'председатель Президиума ЦК КПРФ(б)',age:66}
    ]
};

var tpl4 = new Ext.XTemplate(
    '<b>{text}:</b>',
    '<tpl for="member">', // начало цикла для массива member
    '<p>{#}  {name} ({member})</p>',
    '</tpl>' // конец цикла
);

tpl4.append('ex4',data);

Точно так же как и циклы при помощи тегов <tpl> в шаблоны вводятся условия. Ниже приведен пример только одного шаблона. Из тех же данных что и в предыдущем примере введем ограничение по возрасту.

var tpl5 = new Ext.XTemplate(
    '<b>{text}:</b>',
    '<tpl for="member">', // начало цикла для массива member
    '<tpl if=«age< 60»>', //  ограничение по возрасту
    '<p>{#} {name} ({member})</p>',
    '</tpl>',
    '</tpl>' // конец цикла
);