Extjs 4.1.1 如何调试 Xtemplete

Posted 2023-02-26

【中文标题】Extjs 4.1.1 如何调试 Xtemplete

【英文标题】：Extjs 4.1.1 How to debug 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 的方法。

【参考方案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>']

希望我能帮上忙！

问候