Ext JS en el evento click

Question

Tengo el siguiente caso:

Ext.onReady(function() { 

Ext.select('.gallery-item img').on('click', function(e) { 
    Ext.select('.gallery-item').removeClass('gallery-item-selected'); 
    Ext.get(e.target).parent().addClass('gallery-item-selected'); 
}); 

}); 

que funciona bien cuando se carga la página.

Sin embargo, creo dinámicamente divs adicionales del elemento de la galería de la clase con una imagen dentro de ellos. El evento click deja de funcionar una vez que creo un nuevo elemento.

¿Cómo puedo 'actualizar' este enlace?

Gracias.

Answer 1

Ext.select selecciona todos los elementos y agrega estáticamente el manejador de clics a ellos en ese momento. Para que los elementos nuevos tengan el mismo controlador, también deberían agregarse después de que se crean. Sin embargo, este no es un enfoque óptimo.

Sería mejor utilizar la delegación de eventos en este caso: agregue un manejador de un solo clic a su elemento de contenedor, luego delegue el manejo en función del elemento en el que se hizo clic. Esto es más eficiente (solo se requiere un controlador de evento fn) y es mucho más flexible. Por ejemplo, si su elemento contenedor tenía el ID 'galería-ct' sería como:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // t is the event target, i.e. the clicked item. 
     // test to see if it is an item of the type you want to handle 
     // (it is a DOM node so first convert to an Element) 
     t = Ext.get(t); 
     if(t.hasClass('gallery-item'){ 
     // radioClass automatically adds a class to the Element 
     // and removes it from all siblings in one shot 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
}); 

EDITAR: Si es posible que haya anidado artículos dentro de su objetivo de clic, usted querrá tomar un poco (pero no mucho) enfoque más avanzado y busque su objetivo a medida que el evento de clic brota del elemento cliqueado (usando EventObject.getTarget). Si su objetivo está en la cadena de eventos, ya que brota del elemento cliqueado, entonces sabrá que sigue siendo un clic válido. Código actualizado:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // disregard 't' in this case -- it could be a child element. 
     // instead check the event's getTarget method which will 
     // return a reference to any matching element within the range 
     // of bubbling (the second param is the range). the true param 
     // is to return a full Ext.Element instead of a DOM node 
     t = e.getTarget('.gallery-item', 3, true); 
     if(t){ 
     // if t is non-null, you know a matching el was found 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
});