Hinzufügen eines Klickereignisses zu einem Element?

Question

Wie kann man einem Click-Event in einer ST2 App ein beliebiges span (z. B. < span id = "foo"> foo </span>) zuweisen? Ich habe ein triviales Beispiel, das die Idee dessen, was ich gerne machen würde, illustriert. In dem Beispiel schreibe ich die Buchstaben A, B, C und ich möchte dem Benutzer mitteilen, auf welchen Buchstaben sie geklickt haben. Hier ist ein Bild:

Der Code:

 
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

Sie können einen Zuhörer zu einem bestimmten Element hinzufügen Delegation mit. Es ist eigentlich ziemlich einfach zu benutzen.

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

Die Hauptteile sind element und delegate.

• element den Wert von element haben fast in jedem Fall, wenn Sie mit benutzerdefinierten Komponenten mit benutzerdefinierten Vorlagen arbeiten.
• delegate ist ein einfacher CSS-Selektor. So könnte es alles von span zu span .test.second

Ideal sein, wie Thiem sagte, Sie Vorteil der Komponenten so weit wie möglich zu nehmen. Sie geben Ihnen viel mehr Flexibilität. Aber ich weiß, dass es definitiv einige Fälle gibt, wo du das tun musst. Es wird keine Auswirkungen auf die Leistung geben. in der Tat wird es schneller sein als die Verwendung von Komponenten. Allerdings sollten Sie nie Listener so implementieren, wie er es vorschlägt. Es wird nicht performant sein und ist extrem dreckig (wie er erwähnt hat).