Definir oyentes en el controlador ExtJS

Question

Tengo el 'tabpanel' - es el formulario 'principal' (vista). En este 'tabpanel' defino las diferentes pestañas - xtype 'panel'. Entonces, tengo una vista 'principal' (controlador), 'principal' y algunas pestañas. Las vistas de la pestaña se referencian en la vista 'principal'.

Quiero definir el oyente del evento "activar" del panel de un niño en el controlador "principal". ¿Cómo puedo hacer eso?

el 'principal' controlador:

Ext.define('KP.controller.account.apartment.Main', { 
    extend: 'Ext.app.Controller', 

    views: ['account.apartment.Main', 
     'account.apartment.Requisites' 
    ], 

    models: ['account.apartment.Requisites' 
    ], 
    stores: ['account.apartment.Requisites' 
    ], 


    init: function() { 

    } 
}); 

La vista 'principal':

Ext.define('KP.view.account.apartment.Main', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.ApartmentData', 

    height: 566, 
    width: 950, 
    activeItem: 0, 
    layout: { 
     type: 'fit' 
    }, 
    autoShow: false, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, {    
      items: [ 
       { 
        xtype: 'tabpanel', 
        activeTab: 0, 
        deferredRender: true, 

        items: [       

         { 
          xtype: 'RequisitesApartment' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

}); 

El RequisitesApartment panel secundario (ver):

Ext.define('KP.view.account.apartment.Requisites', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.RequisitesApartment', 


    id: 'panel_accountrequisites', 
    height: 350, 
    width: 1124, 
    autoScroll: true, 
    layout: { 
     type: 'fit' 
    }, 


    listeners: { 
     activate: function() {   
       ....load data.... 
       ...this listeners I want to push in 'main' controller...    
     } 
    }, 

    initComponent: function() { 
     var me = this; 

     var grid_store = Ext.create('KP.store.account.apartment.Requisites'); 

     Ext.applyIf(me, { 
      dockedItems: [ 
       { 
        xtype: 'gridpanel', 
        height: 260, 
        autoScroll: true, 
        dock: 'bottom', 
        store: grid_store, 
        id: 'r_gridFlatParams', 
        forceFit: true, 


        columns: [ 
         ...some columns.... 
        ], 
        viewConfig: { 
       } 
      } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 

Answer 1

Bueno, debo poner este código en 'principal' (controlador):

this.control({ 
     'ApartmentData tabpanel RequisitesApartment': { 
      activate: function() { 
       console.log('hello!');     
      } 
     } 
    }); 

el problema estaba en el selector mal, que he usado. El selector correcta es:

'ApartmentData tabpanel RequisitesApartment' 

Hay ApartmentData '(define como un alias: 'widget.ApartmentData') - es la 'ventana' xtype -la principal forma. tabpanel - panel con pestañas en 'ventana', y 'apartServList' (definir como alias: 'widget.RequisitesApartment') - el panel.

¡Gracias por sra!

Answer 2

Registro directamente como control dentro del controlador responsable

Aquí hay un ejemplo con una consulta que funciona. Seguro que solo necesitará la consulta, pero creo que es un buen ejemplo. El identificador de propiedad de cfg personalizado facilita la búsqueda de cada pestaña. Como en el siguiente ejemplo, deberá especificar una pestañaConfig dentro de cada panel y definir allí el identificador.

Ext.create('Ext.tab.Panel', { 
    width: 400, 
    height: 400, 
    renderTo: document.body, 
    items: [{ 
     title: 'Foo', 
     tabConfig: { 
      ident: 'foo' 
     }, 
    }, { 
     title: 'Bar', 
     tabConfig: { 
      ident: 'bar', 
      title: 'Custom Title', 
      tooltip: 'A button tooltip' 
     } 
    }] 
}); 

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]); 
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]); 

Otra forma es utilizar de css de identificación que se pueden consultar como '#my-name' pero recomiendo usar uno personalizado como en el ejemplo anterior

Answer 3

la cosa correcta que hacer es pasar un objeto de configuración para el función de miembro control en controladorinit función. De la documentación de Sencha: La función de control hace que sea fácil escuchar eventos en sus clases de visualización y tomar algunas medidas con una función de controlador.

Un ejemplo rápido directamente desde ExtJS docs:

Ext.define('MyApp.controller.Users', { 
extend: 'Ext.app.Controller', 

init: function() { 
    this.control({ 
     'viewport > panel': { 
      render: this.onPanelRendered 
     } 
    }); 
}, 

onPanelRendered: function() { 
    console.log('The panel was rendered'); 
} 
}); 

Espero que esto ayude. Saludos