Question

我正在浏览XTemplate中的两个数组，我希望并排显示它们的值。

我在这里找到了类似的东西：

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));
});

这给出了结果：

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

我希望结果如下：

1   a
2   b
3   c

我该如何实现？请帮忙。

Answer 1

尝试使用zipped数组作为数据源

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

小警告：ExtJS 4.0中不推荐使用Ext.zip。

也许您可以像这样生成不同的data并遍历titleArr：

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

ExtJS XTemplate并行迭代两个数组

1 个答案: