XTemplate xkey not working

[benshort]

Hi,

I have the following json

{    "timestamp": 1318781876406,
    "services":[
        {
            "SD":"1000",
            "ED":"1010",
            "DS":"Destination",
            "OC":"X01",
            "CP":"Stop 1, Stop 2, Stop 3"
        },
        {
            "SD":"1030",
            "ED":"1045",
            "DS":"Destination",
            "OC":"X02",
            "CP":"Stop 1, Stop 2, Stop 3"
        }
    ]
}

which I decode using Ext.decode. I then use the XTemplate's overwrite method to update a panel. The XTemplate code is as follows.

'<div>',                                '<h1>Services</h1>',
                                '<p >',
                                '<tpl for="services">',
                                    '<tpl foreach=".">',


                                            '{[xindex]},',
                                          '{[xkey]}<br>',


                                    '</tpl>',
                                '</tpl>',
                                '</p>',
                            '</div>'

What I expect to see is:

1, SD
2, ED
3, DS
4, OC
5, CP

But what I actually see is:

1,

Commenting out

'{[xkey]}<br>',

gives:

1, 2,

Not sure what's going wrong. Anyone got any ideas?

[skirtle]

You may need to upgrade. I think foreach support was only added in 4.1.2, maybe 4.1.1.

With earlier versions you can simulate it using the {%...%} syntax to insert a JavaScript for/in loop.

[burnnat]

This looks like a bug in ExtJS. I copied-and-pasted your template and data into a simple test:

var t = new Ext.XTemplate(
    '<div>',
        '<h1>Services</h1>',
        '<p>',
            '<tpl for="services">',
                '<tpl foreach=".">',
                    '{[xindex]},',
                    '{[xkey]}<br>',
                '</tpl>',
            '</tpl>',
        '</p>',
    '</div>'
);

t.overwrite(Ext.getBody(), {
    "timestamp": 1318781876406,
    "services":[
        {
            "SD":"1000",
            "ED":"1010",
            "DS":"Destination",
            "OC":"X01",
            "CP":"Stop 1, Stop 2, Stop 3"
        },
        {
            "SD":"1030",
            "ED":"1045",
            "DS":"Destination",
            "OC":"X02",
            "CP":"Stop 1, Stop 2, Stop 3"
        }
    ]
});

Running this under Ext 4.1.0 and 4.1.1 only shows "1," like you say. However, running it under ExtJS 4.1.2 gives the proper output, so it would appear to be fixed as of version 4.1.2.

EDIT: Skirtle got his post in a few minutes before me, and of course he's absolutely correct.