在 ExtJS 中处理来自 HTML 锚标记的事件答案

【问题标题】：Handling events from HTML anchor tags in ExtJS在 ExtJS 中处理来自 HTML 锚标记的事件
【发布时间】：2010-10-05 15:13:47
【问题描述】：

我有一个用 ExtJS 构建的大型应用程序，我正在寻找从应用程序的任何位置处理自定义事件的最佳方法。例如，我可能想在应用程序的某些文本中放置一个锚标记，这将在我的应用程序中打开一个自定义组件。目前我会听到身体上的点击，如果目标以某种格式应用了一个 css 类，我会使用它来执行一个动作。

例如我可能有：

<a class="ACTION-View-Customers">View Customers</a>

我的事件处理程序会将类名分开并执行操作。这种方法的问题是很难将许多参数传递给处理程序。我建议在锚的 class 或 href 标记中使用 JSON，如下所示：

<a href="#" class="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a>

您能想到这种方法的任何问题并提出任何替代方案吗？谢谢。

【问题讨论】：

标签： javascript html dom event-handling extjs

【解决方案1】：

如果有帮助的话，我个人不会在 HTML 本身中使用额外的元数据。我会将特定 ID 应用于特定目的的链接，并将点击事件绑定到该对象。我还发现 DomQuery 对象（需要查找和引用锚点）很有趣。由于我通常将 JQuery 适配器与 Ext JS 一起使用，因此我将使用 JQuery 的选择器来定位特定的 DOM 元素，并使用 JQuery 的绑定函数 [.click(fn)]，同时在函数本身内部使用 Ext。 JQuery 和 Ext JS 是一个很好的组合，尤其是新的 JQuery 1.3.1，它确实加快了速度。

【讨论】：

正是我的观点。您应该将事件处理程序直接附加到链接而不是监听正文元素。

【解决方案2】：

您可能知道，HTML 标签接受任何命名属性。因此，您可以创建一些专门调用的属性并将任何值传递给它们（例如my-bogus-param="something"），这样您就可以开发任何复杂的参数传递系统。然后你可以在事件处理程序中解析这些属性。

【讨论】：

【解决方案3】：

我建议使用 HTML5 的data- attributes。例如：

<a href="#" data-event="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a>

var eventsource = link.getAttribute("data-event");

HTH

【讨论】：