Bir öğeye tıklama olayı ekleme?

Question

Bir ST2 uygulamasında keyfi bir açıklığa (ör. < span id = "foo"> foo </span>) bir tıklama olayı nasıl atanabilir? Ne yapmak istediğimin fikrini gösteren önemsiz bir örneğim var. Örnekte, A, B, C harflerini yazdım ve kullanıcıya hangi harfi tıkladıklarını söylemek istiyorum. İşte bir görüntü bu:

kodu:

 
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

Sen heyeti kullanarak belirli bir elemana dinleyici ekleyebilirsiniz. Aslında kullanımı oldukça basittir.

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

ana parçalar element ve delegate bulunmaktadır. Eğer özel şablonlarla özel bileşenleri ile çalışıyoruz sürece

• element, hemen hemen her durumda element değerini sahip olacaktır.
• delegate basit bir CSS seçicisidir. Bu yüzden Thiem söylediği gibi, mümkün olduğunca bileşenlerin yararlanmak gerektiğini span .test.second

İdeal için span şey olabilir. Size daha fazla esneklik verecekler. Ama biliyorum ki, bunu yapman gereken bazı durumlar var. Performansla ilgili bir sonuç olmayacak; Aslında, bileşenleri kullanmaktan daha hızlı olacaktır. Bununla birlikte, 'u asla asla dinleyicilere önerdiği şekilde uygulamalısınız. Performanslı olmayacak ve son derece kirli (bahsettiği gibi).