ExtJs 按钮“单击”侦听器以转到类方法

Posted 2023-02-22

【中文标题】ExtJs 按钮“单击”侦听器以转到类方法

【英文标题】：ExtJs Button 'click' listener to go to class method

【发布时间】：2015-03-22 10:46:51

【问题描述】：

给定这个类代码：

///
/// 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”侦听器以转到类方法“Cerrar”的方法。

我尝试了所有的范围，但没有运气。

谁能帮帮我？

【参考方案1】：

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

我将继续研究范围方法，但与此同时，您应该可以使用以下两种方法中的任何一种：

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


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

【讨论】：

是的，这行得通，我将使用第二种方法。如果您找到了使用 Scopes 的方法，请不要忘记发布！

谢谢，是的，我一收到就会发布:)