Passing arguments to Listener

Question

I have a button:

var me = this;
...
var argumentToPass;
...
{
    xtype: 'button',
    text: 'text',
    listeners: {

            click: {
            fn: me.onBtnAddToBidClick,
                scope: me
            }
    }
}
...

me has a refferance to the argumentToPass.

And the Listerner:

onBtnAddToBidClick: function(button, e, options){
    alert(argumentToPass)
}

Basicly i am trying to make a simple function(String var) method.

How can i get the scope from inside the Listener(onBtnAddToBidClick)

EDIT: Thsi is most of my code:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
   'Ext.selection.CheckboxModel'
]);
var sm = Ext.create('Ext.selection.CheckboxModel');

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

layout: {
    type: 'border'
},

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'panel',
                region: 'west',
                id: 'MenuPanelID',
                width: 255,
                layout: {
                    type: 'accordion'
                },
                collapsed: true,
                collapsible: true,
                title: 'תפריט',
                items: [
                    {
                        xtype: 'form',
                        width: 148,
                        layout: {
                            align: 'stretch',
                            type: 'vbox'
                        },
                        collapsed: false,
                        title: 'מחירונים',
                        dockedItems: [
                            {
                                xtype: 'textfield',
                                flex: 1,
                                dock: 'top',
                                id: 'txtPrefixID',
                                margin: 10,
                                fieldLabel: 'Prefix',
                                labelWidth: 50
                            },
                            {
                                xtype: 'button',
                                flex: 1,
                                dock: 'top',
                                margin: 10,
                                text: 'חפש',
                                listeners: {
                                    click: {
                                        fn: me.onBtnPrefixSearchClick,
                                        scope: me,
                                        arg: 0
                                    }
                                }
                            },
                            {
                                xtype: 'button',
                                flex: 1,
                                dock: 'top',
                                margin: 10,
                                text: 'חפש טווח',
                                listeners: {
                                    click: {
                                        fn: me.onBtnPrefixSearchClick,
                                        scope: me,
                                        arg: 1
                                    }
                                }
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'tabpanel',
                region: 'center',
                id: 'MainTabPanelID',
                activeTab: 0,
                items: [
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'border'
                        },
                        title: 'General',
                        items: [
                            {
                                xtype: 'container',
                                region: 'center',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                items: [
                                    {
                                        xtype: 'gridpanel',
                                        flex: 1,
                                        autoScroll: true,
                                        title: 'שיחות נכנסות',
                                        store: 'IncomingDataStore',
                                        viewConfig: {
                                            id: 'IncomingGridId'
                                        },
                                        columns: [
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'trunk_owner',
                                                text: 'Owner'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'country_name',
                                                text: 'Country'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'country_code',
                                                text: 'Code'
                                            },
                                            {
                                                xtype: 'numbercolumn',
                                                align: 'right',
                                                dataIndex: 'operator_prefix',
                                                text: 'Operator Prefix',
                                                format: '00'
                                            },
                                            {
                                                xtype: 'numbercolumn',
                                                align: 'right',
                                                dataIndex: 'call_duration',
                                                text: 'Duration Hourly'
                                            },
                                            {
                                                xtype: 'numbercolumn',
                                                align: 'right',
                                                dataIndex: 'acd',
                                                text: 'ACD Hourly'
                                            },
                                            {
                                                xtype: 'numbercolumn',
                                                align: 'right',
                                                dataIndex: 'asr',
                                                text: 'ASR Hourly'
                                            },
                                            {
                                                xtype: 'numbercolumn',
                                                align: 'right',
                                                dataIndex: 'calls',
                                                text: 'Calls Hourly',
                                                format: '0,000'
                                            }
                                        ],
                                        listeners:  {
                                            celldblclick: {
                                                fn: me.onIncomingGridpanelCellDblClick,
                                                scope: me
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
},

onBtnPrefixSearchClick: function(arg) {
    var checkBoxPrefixes = Ext.create('Ext.selection.CheckboxModel');
    var val = Ext.getCmp('txtPrefixID').value;
    var v_url = 'GetCountryPrefixes.jsp?' + Ext.urlEncode({'prefix': val, 'action': 'search_exact'});
    alert(arg);

    if arg === 0 {
        // do something...
    }

    var me = this;

    var newTab = Ext.create('Ext.panel.Panel', {
        id: 'prefix_panel',
        title: 'Price Usage Report',
        autoScroll: true,
        layout: {
            type: 'fit'
        },
        closable: true,
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        id: 'buttonBiding',
                        icon: 'images/dollar16x16.png',
                        text: 'הוסף להצעת מחיר',
                        listeners: {
                            click: {
                                fn: me.onBtnAddToBidClick,
                                scope: me
                            }
                        }
                    }
                ]
            }
        ],
        items:  [{
            id: 'prefix_grid',
            xtype: 'gridpanel',
            autoShow: false,
            autoScroll: true,
            selModel: checkBoxPrefixes,
            store:  Ext.create('Ext.data.Store', {
                fields: [

                {name: 'price_date'}, //, type: 'Date' , sortType: 'asDate', format: 'Y-m-d h:M:s'
                {name: 'country_code',type: 'int', sortType: 'asInt'},
                {name: 'prefix',type: 'int', sortType: 'asInt'},
                {name: 'vendor_name'},
                {name: 'rate', type: 'float', sortType: 'asFloat'},
                {name: 'currency'},
                {name: 'quality', type: 'int', sortType: 'asInt'},
                {name: 'duration',type: 'int', sortType: 'asInt'},
                {name: 'acd', type: 'float', sortType: 'asFloat'}
                ],
                proxy: {
                    type: 'ajax',
                    timeout: 120000,
                    url: v_url,
                    reader: {
                        type: 'json',
                        root: 'data',
                        successProperty: 'success'
                    }
                },
                autoLoad: true
            }),
            title: 'Price Reprort for "' + val + '" - Monthly' ,
            columns: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'price_date',
                width: 80,
                text: 'Date',
                renderer: Ext.util.Format.dateRenderer('Y-m-d')
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'country_code',
                text: 'Counry Code',
                width: 80
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'prefix',
                text: 'Prefix',
                width: 80
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'vendor_name',
                width: 100,
                text: 'Vendor Name'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'currency',
                width: 100,
                text: 'Currency'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'rate',
                width: 50,
                text: 'Rate'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'quality',
                width: 50,
                text: 'Quality'
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'duration',
                width: 100,
                text: 'Duration'                    
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'acd',
                width: 100,
                text: 'ACD'
            }
            ]
        }]
    });

    var panel = Ext.getCmp("MainTabPanelID");
    panel.remove('prefix_panel');
    panel.add(newTab).show();

},

Answer 1

You cannot do it because you are not able to modify event args of a defined event.

But you can store the arguments you want to pass into the instance that fires the event or into the scope in which the event callback get executed. In that way you will have access to them either by the first event arg, which is in nearly all situations the instance that fires the event or by the this keyword when you have applied them to the scope.

Simplified example with data stored in callback scope:

fiddle