您可以从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加载post数据，并在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（委托）调用中返回的东西）。

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节点访问轻触元素的属性，也可以使用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屋！