Can you trigger action/events in Sencha Touch from html elements?

Question

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.

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?

Thank you!

Answer 1

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

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).

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

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... :) )