CODEWITHSUNDEEP
javascriptextjsextjs4.2
RobH
RobH

Reputation: 1639

ExtJS: How to call original method from an override?

How do I call the original method from an override method?

I have a combobox from which I am removing one of the values from its store to prevent users from selecting it due to the fact that we are no longer supporting that value in that value. I still want that value to be displayed properly if the combobox receives it, because technically, it's not an invalid value; it's just no longer supported. In order to achieve my goal, I want to override the getDisplayValue() method such that, if the combo box receives the value that is no longer in the store, I want the override method to return the correct string, but if it receives any other value, I want the original method to handle it, like so:

myCombobox = Ext.create("Ext.form.field.ComboBox",
  {
    // <snip><snip>
    getDisplayValue: function()
      {
        if (this.value == 'removedValue')
          {
            return 'Correct Text';
          }
        else
          {
            // What do I do here to call original getDisplayValue() and return its returned value?
          }
      }
  });

Update
Someone posted an answer which said to use this.callParent(arguments); but then they deleted the answer after I left a comment saying that that didn't work. I got the override function to do what I want it to do in the else case by putting in the source code from the overridden function (which I got from Sencha's web site), but I'd rather use a solution that involves somehow actually calling that function instead if that's possible, as its source code could change in a later ExtJS update (e.g., for a bug fix), while mine would remain static.

(Note that I changed the code slightly to look at the value instead of the rawValue, since the latter isn't necessarily defined at the time of the getDisplayValue() call.)

Upvotes: 1

Views: 3077

Answers (2)

JChap
JChap

Reputation: 1441

Even though the question is answered, here is another better way to solve your problem. This is how ExtJS calls it parent method in some of its internal classes.

Ext.create("Ext.form.field.ComboBox", { 
    getDisplayValue: function() {
        if (this.rawValue == 'removedValue') {
            // your logic
            return;
        }
        return Ext.form.field.ComboBox.prototype.getDisplayValue.call(this);
    }
});

Upvotes: 3

Alexander
Alexander

Reputation: 20224

If you use Ext.define, in 4.1 it was callOverridden, and since 4.2 it is callParent.

If you use Ext.create to create a combobox, callParent does not bring you to the combobox's function, but to the function of the base class (triggerfield?), which is not what you want.

What I have used successfully once is something like this:

Ext.create('MyCombo',{
    initComponent:function() {
        var me = this;
        me.callParent(arguments);
        var oldFn = me.getDisplayValue;
        me.getDisplayValue = function() {
            if (this.rawValue == 'removedValue') {
                return 'Correct Text';
            } else {
                oldFn.apply(this, arguments); // What do I do here to call original getDisplayValue() and return its returned value?
            }
        };
    }
});

But it is far cleaner if you use Ext.define to derive your special combobox from the default one and then use callParent.

Upvotes: 0

Related Questions