Ext JS pass extra param to handler

问题

I want to pass extra parameter to handler function of messageBox.

I've created a context menu like this:

    onEventContextMenu: function (s, rec, e) {
    e.stopEvent();

    if (!s.ctx) {
        s.ctx = new Ext.menu.Menu({
            items: [{
                text: 'Delete event',
                iconCls: 'icon-delete',
                scope: this,
                handler : function() {
                Ext.MessageBox.show({
                                title : 'Reason',
                                msg : 'place reason:',
                                width : 300,
                                buttons : Ext.MessageBox.OKCANCEL,
                                multiline : true,
                                fn : this.showResultText(buttonId, text, rec)
                            });
                }
            }]
        });
    }
    s.ctx.rec = rec;
    s.ctx.showAt(e.getXY());
},

showResultText : function (btn, text, record){
alert(btn);
    if (btn == 'cancel') {
        alert(text + ' cancel');
    }
    if (btn == 'ok') {
        alert(record.get('Name'));
    }
},

So than when user click on Delete event he can enter reason why he is doing that. After he press ok or cancel I call handler. I can access button and text in there, but I need to pass extra param.

Reading Sencha documentation I found this:

fn : Function

A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or on the dialog close button, or by pressing the return button to enter input.

Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be closed programatically, so any required function should be called by the same code after it closes the dialog. Parameters passed:

Parameters

-buttonId : String The ID of the button pressed, one of: ok yes no cancel

-text : String Value of the input field if either prompt or multiline is true

-opt : Object The config object passed to show.

But still I cant get this working :(

回答1:

The approach that I usually take is to pass additional data via the scope parameter:

Ext.MessageBox.show({
   ...
   scope: {
      obj: this,
      record: rec
   },
   fn: function(buttonId, text, option) {
      // Access properties specified in the 'scope' parameter via 'this'
      var obj = this.obj,
          record = this.record;

      obj.showResultText(buttonId, text, record);
   }
});

回答2:

Found this Ext.Function

Ext.MessageBox.show({
    title: 'Reason',
    msg: 'place reason:',
    width: 300,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    fn: Ext.Function.bind(this.showResultText, this, rec, true)
});

Then you're showResultText method will look like this:

showResultText : function (btn, text, eventOptions, record){
    alert(btn);
    if (btn == 'cancel') {
        alert(text + ' cancel');
    }
    if (btn == 'ok') {
        alert(record.get('Name'));
    }
},

来源：https://stackoverflow.com/questions/11204680/ext-js-pass-extra-param-to-handler