Agregar un evento de clic a un elemento?

Question

¿Cómo se puede asignar un evento de clic a un intervalo arbitrario (por ejemplo, < span id = "foo"> foo </span>) en una aplicación ST2? Tengo un ejemplo trivial que ilustra la idea de lo que me gustaría hacer. En el ejemplo, escribo las letras A, B, C y me gustaría decirle al usuario en qué letra hicieron clic. Aquí está una imagen:

El código:

 
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

se puede añadir un oyente a un elemento específico usando delegación. En realidad, es bastante simple de usar.

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

Las partes principales son element y delegate.

• element tendrá el valor de element en casi todos los casos, a menos que trabaje con componentes personalizados con plantillas personalizadas.
• delegate es un selector de CSS simple. Por lo que podría ser cualquier cosa de span a span .test.second

Idealmente, como Thiem Dicho esto, usted debe tomar ventaja de los componentes tanto como sea posible. Le darán mucha más flexibilidad. Pero sé que definitivamente hay algunos casos en los que debes hacer esto. No habrá implicaciones de rendimiento; de hecho, será más rápido que usar componentes. Sin embargo, debe nunca implementar escuchas de la manera que él sugirió. No será eficiente y está extremadamente sucio (como mencionó).