您可以从 html 元素触发 Sencha Touch 中的动作/事件吗? [英] Can you trigger action/events in Sencha Touch from html elements?

问题描述

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

I have a Sencha tab panel, each tab loads html content via ajax. One of the components is a post/list that visitors can use to drill down once more to read the entire post.

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

My question is, can I somehow trigger a view switch through the html? Or should I be loading the post data via JSON, and styling a listpanel in Sencha?

谢谢！

推荐答案

您可以向 HTML 中的元素添加侦听器，然后这些元素将能够触发视图切换.例如，

You can add listeners to elements within your HTML which would then be able to trigger the view switch. For example,

// 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'
});

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

The delegate option allows you to pass a selector that means the event will only fire when an element matching that selector is in the event target's chain (i.e. returns something in an e.getTarget(delegate) call).

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

EDIT You can access attributes of the tapped element using either the DOM node tapped or use Ext.fly to wrap an Ext.Element instance around it and use the helper methods.

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 等将是错误的.如果这有意义... :) )

Depending on the nesting you may be able to remove the selector from the getTarget() call (i.e. if you're always tapping on the element your listening on then you can remove it, but if there are children in the element you're listening on then you will need it. In the second case the 'target' will be the child that the event bubbled from so the href etc will be wrong. If that makes sense... :) )

这篇关于您可以从 html 元素触发 Sencha Touch 中的动作/事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！