extjs, как сделать вложенный дочерний элемент, используя xTemplate, когда мы не знаем, насколько он глубок?

Question

во-первых, извините, если мой английский плохой, ....

в моем скрипте переменная tplData ниже является динамической, ... (допустим, она генерируется из базы данных)
Таким образом, каждый ребенок может иметь другого ребенка. и так далее,.... теперь я в стеке, как итерировать, ..

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);

Answer 1

Примерно так:

    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);
        }
      }
    );

Не проверено, поскольку Ext Core не включает XTemplate и это то, что может быть включено в jsbin и jsfiddle

I 'Я уверен, что результат далеко не так, как вам нужно, но он показывает, как рекурсировать.Возможно, вам придется разбить ваш шаблон на две части, чтобы получить результат, к которому вы стремитесь.Проверьте это слайд-шоу для получения дополнительной информации: http://www.slideshare.net/senchainc/advanced-templates-5971877