Passing arguments to Listener - extjs

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