ExtJS 3.4 XTemplate with nested data

gistfile1.js

var data = [
    { id: 1, subdata: { x: 10, y: 20 } },
    { id: 2, subdata: { x: 20, y: 30 } }
];

var tpl = new Ext.XTemplate([
    '<tpl for=".">',
    '<p>ID: {id}</p>',
        '<tpl for="subdata">',
            '<div style="margin-left: 10px">',
                '<p>x: {x}</p>',
                '<p>y: {y}</p>',
            '</div>',
        '</tpl>',
    '</tpl>'
]);

var pnl = new Ext.Panel({
    autoHeight: true,
    html: tpl.apply(data),
    layout: 'fit',
    style: {
        padding: '2px',
        margin: '2px'
    }
});