在 ExtJS 组合框中使用团队板时出现 Javascript 错误(仅限 IE)

Question

我正在使用 ExtJs 4.1.1 并且我的应用程序有一个组合框。我已将 TPL 添加到组合框中。除了数据具有单引号(撇号)等特殊字符外，一切正常。如果我删除 TPL 应用程序不会引发任何 JS 错误。该错误仅发生在 IE 中。我使用的是 IE 10。

即使数据具有特殊字符，如何确保没有java脚本错误。

这是一个fiddle

Answer 1

在您的模板中，您在 onclick 属性的 javascript 代码中使用记录数据:

onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name}\');"

当记录包含单引号时，模板将在该 JavaScript 代码中产生语法错误:

Ext.PA.getController('MyController').ShowSharedQueryWindow('query's');

您需要转义记录的属性以防止出现这种情况:

onClick="Ext.PA.getController(\'MyController\').ShowSharedQueryWindow(\'{Name:htmlEncode:htmlEncode}\');"

:htmlEncode 是一种简写形式，可在 XTemplates 中用于调用 Ext.util.Format 的函数。 .

编辑:您需要对其进行双重编码，一次针对模板，另一次针对生成的 JavaScript 代码(请参阅上面更新的代码)。

<小时/>

Fwiw，在 XTemplate 生成的 HTML 中使用 onclick 监听器对我来说似乎不是最好的方法。一般来说，当我使用 ExtJS 时，我希望避免通过 HTML 添加监听器。

您可以在组合框的绑定(bind)列表上使用 itemclick 监听器，而不是在单击链接时调用相应的函数:

combo.getPicker().on({
    'itemclick': function(view, record, node, index, e) {
        if (e.getTarget().tagName == 'a') {
            Ext.PA.getController('MyController').ShowSharedQueryWindow(record.get('Name'));
        }
    }
});

这样，您也可以避免转义问题。