要素にクリックイベントを追加しますか？

Question

ST2アプリでクリックイベントを任意のスパン（例：< span id = "foo"> foo </span>）に割り当てる方法はありますか？私は何をしたいのかというアイデアを示す簡単な例があります。この例では、A、B、Cの文字を書いています。どの文字をクリックしたかをユーザーに伝えたいと思います。ここでは画像です：

コード：

 
Ext.application({ 

    launch: function() { 
     var view = Ext.create('Ext.Container', { 

      layout: { 
       type: 'vbox' 
      }, 
      items: [ 
       { 
        html: '<span id="let_a">A</span> <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>', 
        style: 'background-color: #c9c9c9;font-size: 48px;', 
        flex: 1 
       } 
      ] 
     }); 
     Ext.Viewport.add(view); 
    } 
}); 

Answer 1

あなたが委任を使用して、特定の要素にリスナーを追加することができます。実際に使用するのはかなり簡単です。

Ext.Viewport.add({ 
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>', 
    listeners: [ 
     { 
      element: 'element', 
      delegate: 'span.one', 
      event: 'tap', 
      fn: function() { 
       console.log('One!'); 
      } 
     }, 
     { 
      element: 'element', 
      delegate: 'span.two', 
      event: 'tap', 
      fn: function() { 
       console.log('Two!'); 
      } 
     } 
    ] 
}); 

主要部分はelementとdelegateです。カスタムテンプレートを持つカスタムコンポーネントを使用して作業している場合を除き

• elementは、ほぼすべてのケースでelementの値を持つことになります。
• delegateはシンプルなCSSセレクタです。だから、Thiemが言ったように、あなたは可能な限り部品を活用する必要があり、span .test.second

理想的にspanから何でもかまいません。彼らはあなたにはるかに柔軟性を与えるでしょう。しかし、私はあなたがこれを行う必要があるいくつかのケースが間違いないことを知っています。パフォーマンスに影響はありません。実際には、コンポーネントを使用するよりも速くなります。しかし、は決しては彼が提案した方法でリスナーを実装する必要があります。それは演奏されず、（彼が言及したように）非常に汚いです。