first, sorry if my english bad,....

in my script, variable tplData below is dynamic,... (lets say it generates from database)
so, every chid, can have another child. and so on,.... now, i'm stack how to iteration it,..

var tplData = [{
            name  : 'Naomi White'
        },{
            name : 'Yoko Ono'
        },{
            name : 'John Smith',
            child : [{
                    name:'Michael (John\'s son)',
                    child: [{
                            name : 'Brad (Michael\'s son,John\'s grand son)'
                    },{
                            name : 'Brid (Michael\'s son,John\'s grand son)',
                            child: [{
                                name:'Buddy (Brid\'s son,Michael\'s grand son)'
                            }]
                    },{
                        name : 'Brud (Michael\'s son,John\'s grand son)'
                    }]
                }]
        }];

        var myTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="background-color: {color}; margin: 10px;">',
                    '<b> Name :</b> {name}<br />',
                        // how to make this over and over every child (while it has )
                        '<tpl if="typeof child !=\'undefined\'">',
                            '<b> Child : </b>',
                                '<tpl for="child">',
                                '{name} <br />',
                            '</tpl>',
                       '</tpl>',
                       ///////////////////////////////////////
                '</div>',
             '</tpl>'
        );
        myTpl.compile();

        myTpl.overwrite(document.body, tplData);