Extjs, how to make a nested child using xTemplate when we do not know how deep it is?

Question

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

in my script, the tplData variable below is dynamic, ... (let's say it is generated from the database)
so every child can have a different child. and so on, .... now, I stack how iterating this, ..

var tplData = [{
            name  : 'Naomi White'
        },{
            name : 'Yoko Ono'
        },{
            name : 'John Smith',
            child : [{
                    name:'Michael (John\ son)',
                    child: [{
                            name : 'Brad (Michael\ son,John\ grand son)'
                    },{
                            name : 'Brid (Michael\ son,John\ grand son)',
                            child: [{
                                name:'Buddy (Brid\ son,Michael\ grand son)'
                            }]
                    },{
                        name : 'Brud (Michael\ son,John\ 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);

Answer 1

Something like that:

    var myTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="background-color: {color}; margin: 10px;">',
                '<b> Name :</b> {name}<br />',
                    '<tpl if="typeof child !=\'undefined\'">',
                        '<b> Child : </b>',
                          '{[ this.recurse(values) ]}',
                        '</tpl>',
                   '</tpl>',
            '</div>',
         '</tpl>',
      {
        recurse: function(values) {
          return this.apply(values.child);
        }
      }
    );

Untested, since Ext Core does not contain an XTemplate, and this is something that can be included in jsbin and jsfiddle

, , , , . , , , . - : http://www.slideshare.net/senchainc/advanced-templates-5971877