Vinculación de eventos de clic a una pestaña en Ext JS

Aloha de nuevo, SO.

Estoy ocupado trabajando en un proyecto que es prácticamente todo ExtJS para el trabajo de frontend. Estoy usando la versión 4.0.0, asumiendo que es algo que es necesario saber. Tengo un código a lo largo de lo siguiente:

panel = Ext.create("Ext.panel.Panel",{
        //initializing stuffs
})

Algunos de esos entonces

 tabs = Ext.create("Ext.tab.Panel", {
        //initialize config
        items: [
               //the panels
        ]
  })

Ahora, mi gran problema aquí es que necesito poder vincular un evento a las pestañas reales. Soy consciente de que puedo vincular eventos al panel de pestañas y la barra de pestañas, pero necesito vincular el evento de clic a una de las pestañas del panel. Intenté algo parecido a esto:

panel = Ext.create("Ext.panel.Panel", {
        //initializing stuffs
        listeners: {
                 click: {
                        fn: function() {
                            console.log("in click listener for panel")
                        }
                  }
         }
 })

Sin embargo, el problema es, según lo que puedo decir, que se une al panel real en sí, y no a la pestaña de la barra de pestañas. En una nota al margen interesante, en realidad ni siquiera se une al panel real, en lo que respecta a la funcionalidad, porque nunca veo la información de registro de la consola.

En cualquier caso, ¿alguno de ustedes sabría cómo vincular eventos directamente a las pestañas? ¿O incluso cómo acceder directamente a las pestañas? He estado examinando los documentos de la API de ExtJS, pero todavía no puedo encontrar nada, así que sería genial si alguien aquí pudiera ayudar. :D

Solo para que quede claro, no estoy tratando de engancharme al cambio de pestaña. Estoy tratando de conectarme al evento de clic real de hacer clic en la pestaña, porque voy a verificar si se hace clic en el botón central del mouse para poder cerrar la pestaña si es así.

preguntado el 16 de mayo de 11 a las 17:05

2 Respuestas

Puse esto en una pestaña dentro de un panel de pestañas en ExtJS 3. Algo similar debería funcionar en 4.

listeners: {
    activate: function() {
        var me = this;
        Ext.fly(this.ownerCt.getTabEl(this)).on({
            click: function() {
                me.loadProducts();
            }
        });
    },
    single: true
},

loadProducts: function() {
    this.load({
    url: 'products.jsp',
    params: {
        caseID: window.caseID
    },
    scripts: true
});

contestado el 17 de mayo de 11 a las 23:05

Debe mirar la propiedad tabBar en el panel de pestañas en Ext4. Utilice el índice de la pestaña para encontrarlo en los elementos de la barra de pestañas y adjunte un controlador de clic. - Tigre negro

Terminé descubriendo lo que necesito averiguar; después de agregar una pestaña a la barra de pestañas, agrega una propiedad al componente que agregó en la pestaña llamada que representa el botón de pestaña, por lo tanto, simplemente enlacé onmousedown a eso y todo es perfecto. - ozzmotik

@Sir mXe: estoy interesado en hacer algo similar a urs, pero realmente no pude entender lo que hiciste, newbis en extjs me temo, ¿podrías explicar más? Un ejemplo también sería bienvenido, gracias de antemano - Armance

@astrocybernaute Supongo que no encontraste una respuesta, ¿verdad? - ozzmotik

Puedes agregar oyentes a TabPanel sí mismo que escucha beforetabchange y/o tabchange

contestado el 17 de mayo de 11 a las 02:05

El problema es que beforetabchange y tabchange no abordan el problema de la interpretación de los clics. Lo configuraré para que se vincule al evento de clic y, a partir de ahí, determinaré si se está presionando el botón central del mouse. Me aseguraré de actualizar la pregunta inicial; aunque gracias por la sugerencia: D - ozzmotik

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.