ExtJS XTemplate Iterating over two arrays parallely

Question

I am browsing through two arrays inside an XTemplate and I want to display their values side by side.

I found something similar mentioned here:

Extjs XTemplate two same level array loop?

Ext.onReady(function () {
var panel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'test',
    height: 300,
    width: 300
});

var data = {
    name: 'xxx',
    rowTitleArr: ['1', '2', '3'],
    colTitleArr: ['a', 'b', 'c']
}
var tpl = [
    '<br/>',
    '<tpl for="rowTitleArr">',
    '{.}<br>',
        '<tpl for="parent.colTitleArr">',
    '---{.}<br>',
        '</tpl>',
    '</tpl>'];

var t = new Ext.XTemplate(tpl);
panel.update(t.apply(data));
});

This gives the result:

1
---a
---b
---c
2
---a
---b
---c
3
---a
---b
---c

I want the result to be the following:

1   a
2   b
3   c

How do I implement this? Please help.

Answer 1

Try to use a zipped array as the data source

var t = new Ext.XTemplate(tpl);
panel.update(t.apply({ titleArr: Ext.zip(data.rowTitleArr, data.colTitleArr) }));

Little warning: Ext.zip is deprecated in ExtJS 4.0.

Maybe you can produce a different data like this and iterate through titleArr:

var data = {
    name: 'xxx',
    titleArr: [
        { row: '1', col: 'a' },
        { row: '2', col: 'b' },
        { row: '3', col: 'c' }
    ]
};