Extjs 4.1.1 如何调试 Xtemplete答案

【问题标题】：Extjs 4.1.1 How to debug XtempleteExtjs 4.1.1 如何调试 Xtemplete
【发布时间】：2013-05-23 06:38:48
【问题描述】：

我使用的是 Ext 4.1.1 版本。

我想知道如何调试 Xtemplate。 IE。例如

 '<tpl for="outerObject">',
     '<tpl for="innerObject">',
          '<span class="abc">{myValue}</span>',
     '</tpl>',
 '</tpl>',

现在我想知道outerObject的Value有什么，取决于想要循环到innerObject等等。

请告诉我任何调试 Xtemplate 的方法。

【问题讨论】：

标签： extjs4.1

【解决方案1】：

最简单的方法是进入浏览器的调试器：

tpl: [
'<tpl for="outerObject">',
     '{% debugger; %}'
     '<tpl for="innerObject">',
          '<span class="abc">{myValue}</span>',
     '</tpl>',
'</tpl>'
]

【讨论】：

【解决方案2】：

您可以在 XTemplate 中执行任意内联代码。因此，您可以调用console.log 来打印一些对象变量：

'{[console.log(values.outerObject)]}',

【讨论】：

@Atul，我知道的唯一一个。
好的，非常感谢 Molecular Man.. 它帮助我更进一步。
您也可以使用'{[console.log(values.innerObject)]}' 或'{[console.log(values.myValue)]}'。 values 变量包含来自当前范围的数据，而不是最初提供给 XTemplate 的数据。您甚至可以使用'{[console.log(values)]}' 查看当前范围内有哪些可用数据。

【解决方案3】：

我知道这是“旧的”，但是，如果您有自己的模板或无论如何都要使用模板，您实际上可以添加调试器； command 和 chrome 将跳转到调试器中。

    extraRowTpl: [
    '{%',
        'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',
        'debugger;', **<!-- WILL STOP HERE**
        'this.nextTpl.applyOut(values, out, parent);',
    '%}',
    '<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}">',
        '<td class="' + Ext.baseCSSPrefix + 'grid-cell-rowbody' + ' ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-td" colspan="{rowBodyColspan}">',
            '<div class="' + Ext.baseCSSPrefix + 'grid-rowbody' + ' {rowBodyDivCls}">{rowBody}</div>',
        '</td>',
    '</tr>']

希望我能帮上忙！

问候

【讨论】：