ExtJs Button 'click' listener to go to class method

Question

Given this class code:

///
/// FORM tBasicFrm
///
Ext.define('tBasicBrwFrm',{ extend: 'Ext.panel.Panel'
    ,id: 'tBasicBrwFrm'
    ,layout: 'fit'

    ///
    /// CUSTOM PROPERTIES
    ///
    ,nOpcion: 0
    ,lVRet: false
    ,oParent: null
    ,oModel: null
    ,oStore: null
    ,oGrid: null
    ,oRecord: null
    ,oActividad: null

    ///
    /// EVENTS
    ///
    ,listeners:{
        destroy: function(){            
            if( this.oStore != null ){
                this.oStore.destroy();
            }

            if( this.oModel != null ){
                this.oModel.destroy();
            }

            if( this.oGrid != null ){
                this.oGrid.destroy();
            }

            if( this.oRecord != null ){
                this.oRecord.destroy();
            }

            if( this.oActividad != null ){
                this.oActividad = null;
            }

            if( this.oParent != null && this.oParent != 'undefined' && Ext.getClass(this.oParent).superclass.self.getName() === 'tBasicFrm'){
                if(!this.oParent.isVisible()){
                    this.oParent.show();
                }
            }
        }
        ,render: function(){
            if(this.oParent != null && this.oParent != 'undefined' && Ext.getClass(this.oParent).superclass.self.getName() === 'tBasicFrm' ){
                this.oParent.hide();
            }
        }
    }

    ///
    /// METHODS
    ///
    ,cargaActividad: function(){
        var oFecha = new Date();
        var oHora  = new Date();
        var nDia   = oFecha.getDate();
        var nMes   = oFecha.getMonth() + 1;
        var nAnyo  = oFecha.getFullYear();

        if( nDia < 10 ){
            nDia = '0' + nDia;
        }

        if( nMes < 10 ){
            nMes = '0' + nMes;
        }

        oFecha = nDia+'/'+nMes+'/'+nAnyo;
        oHora  = oHora.getHours() + ':' + oHora.getMinutes() + ':' + oHora.getSeconds();

        this.oActividad = { 
            cAlias: ""
            ,cTipo: ""
            ,cEstado: ""
            ,dFecha: oFecha
            ,cHoraIni: oHora
            ,cCodigo: ""
            ,cNumDoc: ""
            ,cTipoDoc: ""
            ,cImporte: ""
            ,cFPago: ""
            ,cEstado: ""
            ,cObserva: ""
            ,cImpresa: ""
        }
    }
    ,grabaActividad: function(){

    }
    ,Cerrar: function(){

    }
    ,Insertar: function(){

    }
    ,Modificar: function(){

    }
    ,Eliminar: function(){

    }
    ,Consultar: function(){

    }
    ,Imprimir: function(){

    }
    ,Filtrar: function(){

    }

    ///
    /// CONTROLS
    ///
    ,dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'top',autoScroll: true,
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            items: [
                {
                    xtype: 'button',
                    text: 'Cerrar',
                    width: 120,
                    icon: 'img/16x16/Salir16.png',
                    iconAlign: 'left',
                    listeners: {
                        click: 'Cerrar'
                    }
                },
                {
                    xtype: 'button',
                    text: 'Agregar',
                    width: 120,
                    icon: 'img/16x16/Añadir16.png',
                    iconAlign: 'left',
                    listeners: {
                        click: 'Insertar'
                    }
                },
                {
                    xtype: 'button',
                    text: 'Modificar',
                    width: 120,
                    icon: 'img/16x16/Editar16.png',
                    iconAlign: 'left',
                    listeners: {
                        click: 'Modificar'
                    }
                },
                {
                    xtype: 'button',
                    text: 'Consultar',
                    width: 120,
                    icon: 'img/16x16/Consultar16.png',
                    iconAlign: 'left',
                    listeners: {
                        click: 'Consultar'
                    }
                },
                {
                    xtype: 'button',
                    text: 'Eliminar',
                    width: 120,
                    icon: 'img/16x16/Eliminar16.png',
                    iconAlign: 'left',
                    listeners: {
                        click: 'Eliminar'
                    }
                }
            ]
        }
    ]
});

I cannot find the way to configure the button "Cerrar" listener to go to the class method "Cerrar".

I tried to scope all and no luck.

Can anybody help me?

Answer 1

I've been playing around with this code and managed to get the button click handler to call the right function using the below listeners code but it doesn't quite feel right, Usually you can scope the buttons this to pass in the scope of the parent component but it does not seem to be working for me.

I will keep investigating the scope method but in the meantime, you should be able to use either of these two methods:

// method 1
xtype: 'button',
...
listeners: {
    click: function() { this.up('panel').Cerrar(); }
}

// method 2
xtype: 'button',
...
listeners: {
    click: function() { this.ownerCt.ownerCt.Cerrar(); }
}