Czy możesz wywołać akcję/zdarzenia w Sencha Touch z elementów HTML?

Question

Mam panel zakładki Sencha, każda zakładka ładuje zawartość html przez ajax. Jednym z elementów jest lista/lista, którą odwiedzający mogą użyć, aby przeczytać raz jeszcze, aby przeczytać cały wpis.

Moje pytanie brzmi, czy mogę w jakiś sposób uruchomić przełącznik widoku przez html? Czy powinienem ładować dane pocztowe za pomocą JSON i stylizować panel listy w Sencha?

Dziękujemy!

Answer 1

Można dodawać detektory do elementów w kodzie HTML, które mogą powodować przełączanie widoku. Na przykład,

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

Opcja delegat pozwala przekazać selektor oznacza to, że zdarzenie zostanie wyzwolony tylko wtedy, gdy element pasujący że przełącznik jest w łańcuchu docelowe zdarzenia (tj zwraca coś w e.getTarget (delegata) połączenie).

EDIT można uzyskać dostęp atrybuty gwintowanego elementu przy użyciu węzła DOM podsłuchu lub użyj Ext.fly owinąć się wokół niego Ext.Element instancję i użyj metody pomocnika.

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 

zależności od zagnieżdżenia może być w stanie usunąć z selektora() wezwanie getTarget (tj jeśli zawsze dotknięcie elementu słuchania na czym można go usunąć, ale jeśli są dzieci w drugim elemencie, którego słuchasz, będziesz go potrzebować, w drugim przypadku "target" będzie dzieckiem, z którym bączy się wydarzenie, więc href itp. będzie błędny. Jeśli to ma sens ... :))

Answer 2

rozwiązaniem 2.2.1:

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

    this.callParent(arguments); 
} 

<query_expression> może być również dowolna wersja z Ext.query().