您可以从 html 元素触发 Sencha Touch 中的动作/事件吗？答案

【问题标题】：Can you trigger action/events in Sencha Touch from html elements?您可以从 html 元素触发 Sencha Touch 中的动作/事件吗？
【发布时间】：2011-07-19 17:24:22
【问题描述】：

我有一个 Sencha 选项卡面板，每个选项卡都通过 ajax 加载 html 内容。其中一个组件是一个帖子/列表，访问者可以使用它再次向下钻取以阅读整个帖子。

我的问题是，我可以通过 html 以某种方式触发视图切换吗？或者我应该通过 JSON 加载帖子数据，并在 Sencha 中设置列表面板的样式？

谢谢！

【问题讨论】：

标签： extjs sencha-touch

【解决方案1】：

您可以向 HTML 中的元素添加侦听器，从而触发视图切换。例如，

// simple HTML snippet contained in Panel
<a class="my-link">Click Me!</a>

// on after load/after render (need to ensure that the elements exists in the page!)

// get reference to the containing panel (tab)
var panel = this.items.get(0);

panel.getEl().on({
   tap: function(e){
      console.log('i was clicked!');
   },
   delegate: 'a.my-link'
});

delegate 选项允许您传递一个选择器，这意味着该事件仅在与该选择器匹配的元素位于事件目标链中时才会触发（即在 e.getTarget(delegate) 调用中返回某些内容）。

编辑您可以使用被点击的 DOM 节点访问被点击元素的属性，或者使用 Ext.fly 将 Ext.Element 实例包裹在它周围并使用辅助方法。

console.log(e.getTarget('a.my-link')); // logs DOM node
console.log(Ext.fly(e.getTarget('a.my-link'))); // logs Ext.Element wrapping DOM node

console.log(e.getTarget('a.my-link').href); // logs href via DOM node property
console.log(Ext.fly(e.getTarget('a.my-link')).getAttribute('href')); // logs href via Ext.Element getAttribute() method

根据嵌套，您可以从 getTarget() 调用中删除选择器（即，如果您总是点击您正在监听的元素，那么您可以将其删除，但如果元素中有子元素，您'正在听，那么你将需要它。在第二种情况下，'目标'将是事件从中冒泡的孩子，因此 href 等将是错误的。如果这是有道理的...... :)）

【讨论】：

谢谢 stuart，有没有办法读取 href 或者我可以告诉 sencha 加载某个页面的内容？

【解决方案2】：

2.2.1的解决方案：

initialize: function() {
    this.element.on({
        tap: <function>,
        delegate: <query_expression>
    });

    this.callParent(arguments);
}

<query_expression> 也可以是任何适合 Ext.query() 的东西。

【讨论】：