Extjs XTemplate三个相同级别的数组循环

时间:2013-02-26 14:12:07

标签: extjs


    我想在我的extjs代码中同时循环三个数组,但它不起作用!     我一直在测试,两个数组的结果还可以,但三个数组不起作用

var json = {
    name : 'tom',
    rowTitleArr : ['1','2'],
    colTitleArr : ['a','b'],
    optionArr : ['x','y']
}
var tpl = [
    '{name}<br>',
    '<tpl for="rowTitleArr">',
        '--{.}<br>',
        '<tpl for="parent.colTitleArr">',
            '----{.}<br>',
            '<tpl for="parent.parent.optionArr">',
                '--------{.}<br>',
             '</tpl>',
        '</tpl>',
    '<tpl>'
];
var tpl = new Ext.XTemplate(tpl);
tpl.overwrite(panel.body,json);

结果是:
        汤姆
        --1
        ----一个
        ---- b
        --2
        ----一个
        ---- b
我认为那应该是:
        --1
        ----一个
        -------- X
        --------ÿ
        ---- b
        -------- X
        --------ÿ
        --2
        ----一个
        -------- X
        --------ÿ
        ---- b
        -------- X
        --------ÿ
        ...         为什么?

1 个答案:

答案 0 :(得分:2)

我实现这一目标的唯一方法是将rowTitleArr作为对象。

您的exmaple不起作用,因为在值中不知道parent.parent。你可以用模板exec函数设置它。

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

小提琴: http://jsfiddle.net/johanhaest/2WEVE/1/