Можете ли вы запустить действие / события в Sencha Touch из HTML-элементов? - PullRequest
Новая
       0

Можете ли вы запустить действие / события в Sencha Touch из HTML-элементов?

5 голосов
/ 19 июля 2011

У меня есть панель вкладок Sencha, каждая вкладка загружает html-контент через ajax. Одним из компонентов является пост / список, который посетители могут использовать, чтобы развернуть еще раз, чтобы прочитать весь пост.

У меня вопрос, могу ли я как-то вызвать переключение вида через HTML? Или я должен загружать данные поста через JSON и стилизовать панель списка в Sencha?

Спасибо!

Ответы [ 2 ]

5 голосов
/ 21 июля 2011

Вы можете добавить слушателей к элементам в вашем 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'
});

Опция делегата позволяет вам передавать селектор, что означает, что событие будет срабатывать только тогда, когда элемент, соответствующий этому селектору, находится в цепочке цели события (т.е. возвращает что-то в вызове e.getTarget (делегат)).

EDIT Вы можете получить доступ к атрибутам элемента, к которому подключен, с помощью либо подключенного узла 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 () (т. Е. Если вы всегда нажимаете на элемент, который слушаете, вы можете удалить его, но если в элементе, который вы используете, есть дочерние элементы) вы слушаете, тогда вам это понадобится. Во втором случае 'target' будет дочерним элементом, от которого возникло событие, поэтому href и т. д. будут неправильными. Если это имеет смысл ... :))

0 голосов
/ 12 сентября 2013

Решение для 2.2.1 : 

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

    this.callParent(arguments);
}

<query_expression> может быть любым, подходящим для Ext.query().

...