ExtJs Button 'click' 侦听器转到 class 方法

Question

鉴于此 class 代码：

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

我找不到配置按钮 "Cerrar" 侦听器以转到 class 方法的方法 "Cerrar"。

我尝试了所有的范围，但没有成功。

有人可以帮我吗？

Answer 1

我一直在研究这段代码，并设法让按钮点击处理程序使用下面的侦听器代码调用正确的函数，但感觉不太对，通常你可以确定按钮的范围 this 传递父组件的范围，但它似乎对我不起作用。

我会继续研究范围方法，但与此同时，您应该可以使用以下两种方法之一：

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

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

ExtJs Button 'click' 侦听器转到 class 方法

ExtJs Button 'click' listener to go to class method

methods

extjs

class

button

listener