參數傳遞給聽衆

Question

我有一個按鈕：

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

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

我有一個refferance到argumentToPass。

而且Listerner：

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

Basicly我試圖做一個簡單的函數（字符串變量）方法。

我怎樣才能從監聽器內部得到的範圍（onBtnAddToBidClick）

編輯：Thsi是我的大部分代碼：

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

你不能這樣做，因爲你不能夠修改事件參數定義的事件。

但是，您可以將要傳遞給參數的參數存儲到引發事件的實例中，或者存儲到執行事件回調的範圍中。通過這種方式，您可以通過第一個事件arg訪問它們，這個事件arg幾乎在所有情況下都是引發事件的實例，或者當您將它們應用到範圍時通過this關鍵字訪問它們。

簡單的例子與存儲在回調範圍數據：

fiddle