当我们不知道它有多深时，extjs如何使用xTemplate创建嵌套子级？

Question

首先，抱歉，如果我的英语不好，....

在我的脚本中，下面的变量 tplData 是动态的，...(可以说它是从数据库生成的)
所以，每个 child ，都可以再生一个 child 。等等，....现在，我正在堆栈如何迭代它，..

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，而 XTemplate 可以包含在 jsbin 和 jsfiddle 中

我确信输出远未达到您的需要，但它显示了如何递归。您可能需要将模板分成两部分才能获得所需的输出。查看此幻灯片了解更多信息:http://www.slideshare.net/senchainc/advanced-templates-5971877