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中

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

extjs如何在我们不知道它有多深的时候使用xTemplate创建一个嵌套的子节点？

1 个答案: