How to add a break (newline) after x iterations using XTemplate?

Question

I want to add a </br> after 12 iterations in an XTemplate. I tried many approaches, but couldn't get it to work. Sample code is below:

days = new Ext.XTemplate(
            '<b>Days of month</b>',
            '<table width="100%"><tr><td style="word-wrap:break-word;">',
            '<tpl for=".">',
            '<tpl for="data">',

            **'{% if (xindex % 12 === 0) { %}' +
                    '<br/>' +
                     '{% } %}',**
              ,'{fieldValue}',
            '</tpl>',
            '</tpl>', 
            '</td></tr></table>',

I tried to use xindex, but it did not have any effect and does not add a newline after 12 records. What I am doing wrong?

Answer 1

Full example:

Ext.onReady(function() {

    var data = [1, 2, 3, 4, 5, 6];

    var tpl = new Ext.XTemplate([
        '<tpl for=".">',
            '{.}',
            '<tpl if="xindex % 2 === 0"><br /></tpl>',
        '</tpl>'
    ]);

    tpl.overwrite(Ext.getBody(), data);

});