extjs4.1 - Extjs 4.1.1 如何调试 Xtemplete

Question

我正在使用 Ext 4.1.1 版本。

我想知道如何调试 Xtemplate。ieeg

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

现在我想知道 value externalObject 有什么，这取决于要循环到 innerObject 等等。

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

Answer 1

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

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

Answer 2

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

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

Answer 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>']

希望我能帮上忙！

格雷茨