CODEWITHSUNDEEP
extjs
jason
jason

Reputation: 3

Extjs XTemplate three same level array loop


I want to loop over three arrays at the same time in my extjs code,but it does not work! I have been testing and the result with two arrays is ok, but three arrays do not work!

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

the result is :
tom
--1
----a
----b
--2
----a
----b
I think that is should be :
--1
----a
--------x
--------y
----b
--------x
--------y
--2
----a
--------x
--------y
----b
--------x
--------y
... why ?

Upvotes: 0

Views: 2360

Answers (1)

Johan Haest
Johan Haest

Reputation: 4421

The only way I got this working was with your rowTitleArr as an object.

Your exmaple does not work because parent.parent is not known in the values. U can set it with a template exec function.

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>'];

Fiddle: http://jsfiddle.net/johanhaest/2WEVE/1/

Upvotes: 2

Related Questions