Display issue with extjs xtemplate

Question

I am using the following xTemplate to loop over data:

var xtpl=new  Ext.XTemplate(
    '<tpl for=".">',
        '<div style=background-color: {color}; margin:10px;">',
            '<b> Name : </b> {name}<br />',
            '<b> Cars : </b>',
            '<tpl for ="cars">',
                '{.}',
                '{[(xindex < xcount)?", ":""]}',
            '</tpl>',
            '<br />',
        '</div>',
    '</tpl>'
);

Sample data :

var xdata=[{
        color : "#E9E9FF",
        name : 'John',
        cars : ['Jetta','Honda']
        },
        {
        color : "#E9E9FF",
        name : 'Rob',
        cars : ['Passat','Ford','VW']
        }];

The output gets displayed as :

Name : John
Cars : [object Object], 
Name : Rob
Cars : [object Object]

What is the error that prevents the cars being displayed properly?
Appreciate any help.

Answer 1

Looks like that ExtJS XTemplate have problem with parsing '<tpl for ="cars">' statement when you have space between for and =.

Try to change this line to:

<tpl for="cars">', 

it should works.