XTemplate阵列

Question

我有以下模板：

tpl: [
    '<table class="grid-wrap x-grid-table x-grid-with-row-lines x-grid-with-col-lines">',
        '<tpl foreach=".">',       // process the data.kids node
            '<tr class="{[xindex % 2 === 0 ? "x-grid-row-alt" : ""]}">',
                '<td class="x-grid-td x-grid-cell"><div class="x-grid-cell-inner">{$}</div></td>',
                '<td class="x-grid-td x-grid-cell"><div class="x-grid-cell-inner">{.}</div></td>',
            '</tr>',
        '</tpl>',
    '</table>'
],

我有以下数据：

var data = [
   ["Title A", "Data A"],
   ["Title B", "Data B"]
]

如何使模板遍历数组并在第一个td中显示标题，在第二个td中显示数据

Answer 1

可以通过大括号使用索引数组。

ExtJS XTemplate中的Sencha填充阵列

var data = [
   ["Title A", "Data A"],
   ["Title B", "Data B"]
]


var tpl = Ext.create('Ext.XTemplate',
              '<tpl for="."',
                 '<p>{0} / {1}</p>',
              '</tpl>',
              {
                 compiled: true
              }
          );

Ext.create('Ext.panel.Panel', {
    title: 'XTemplate Example',
    height: 100,
    bodyPadding: 10,
    tpl: tpl,
    data: data,
    renderTo: Ext.getBody()
});