Dodawanie zdarzenia kliknięcia do elementu?

Question

Jak można przypisać zdarzenie kliknięcia do dowolnego zakresu (np. < klucz zakresu = "foo"> foo </span>) w aplikacji ST2? Mam trywialny przykład ilustrujący ideę tego, co chciałbym robić. W tym przykładzie napiszę litery A, B, C i chciałbym powiedzieć użytkownikowi, którą literę kliknął. Oto zdjęcie:

Kod:

 
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

Możesz dodać detektor do określonego elementu przy użyciu delegację. W rzeczywistości jest dość prosty w użyciu.

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

główne części są element i delegate.

• element będzie miał wartość element w prawie każdym przypadku, chyba że pracujesz z niestandardowych składników z niestandardowych szablonów.
• delegate to prosty selektor CSS. Więc może to być coś z span do span .test.second

idealnie, jak Thiem powiedział, należy skorzystać z komponentów jak najwięcej. Dadzą ci dużo więcej elastyczności. Ale wiem, że są pewne przypadki, w których trzeba to zrobić. Nie będzie żadnych skutków dla wydajności; w rzeczywistości będzie to szybsze niż używanie komponentów. Jednak powinieneś nigdy wdrożyć słuchaczy tak, jak sugerował. Nie będzie wydajne i jest bardzo brudne (jak wspomniał).