html要素からSencha Touchのアクション/イベントをトリガーできますか？

Question

私はSenchaタブパネルを持っており、各タブはajaxを介してhtmlコンテンツを読み込みます。コンポーネントの1つは、訪問者がもう一度ドリルダウンして投稿全体を読むために使用できる投稿/リストです。

私の質問は、どういうわけかhtmlでビュースイッチを起動できますか？または、私はJSON経由で投稿データをロードし、Senchaのリストパネルをスタイリングする必要がありますか？

ありがとうございました！

Answer 1

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（デリゲートで何かを返しますコール）。あなたがタップDOMノードのいずれかを使用してタップ要素の属性にアクセスしたり、その周りにExt.Elementとしてインスタンスをラップし、ヘルパーメソッドを使用するExt.flyを使用することができます

EDIT 。あなたはそれを削除することができますが、子供がある場合は、必ず要素に、その後のリスニングをタップしている場合、あなたがでgetTarget（）の呼び出し（つまりからセレクタを削除することができるかもしれネストによって

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 

2番目のケースでは、 'ターゲット'はイベントがバブルした子になり、hrefなどが間違っています。それが意味をなさない... :)）

Answer 2

2.2.1のためのソリューション：

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

    this.callParent(arguments); 
} 

<query_expression>は、Ext.query()にも対応しています。