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

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

Мой вопрос: могу ли я как-то вызвать переключение вида через html? Или я должен загружать данные сообщения через JSON и стилизовать панель списка в Sencha?

Спасибо!


person David Nguyen    schedule 19.07.2011    source источник


Ответы (2)


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

РЕДАКТИРОВАТЬ Вы можете получить доступ к атрибутам затронутого элемента, используя либо затронутый узел 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() (т.е. если вы всегда нажимаете на элемент, который вы слушаете, вы можете удалить его, но если в элементе, который вы слушаете, есть дочерние элементы тогда он вам понадобится. Во втором случае «целью» будет дочерний элемент, из которого возникло событие, поэтому href и т. д. будет неправильным. Если это имеет смысл... :))

person Stuart    schedule 21.07.2011
comment
спасибо, стюарт, есть ли способ прочитать href или что-то, что я могу сказать сенче, чтобы загрузить определенную страницу? - person David Nguyen; 21.07.2011

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

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

    this.callParent(arguments);
}

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

person scheffield    schedule 12.09.2013