The Cliftonian

Not as newsy as the name implies…

Override methods using Inheritance in ExtJS 4

leave a comment »

I was using a UI component that someone else wrote and I wanted to provide a slightly different version of for a specific need.  I figured the quickest way to provide this functionality would be to subclass the component and override the methods with different behavior to handle the slightly different use case.  I didn’t want to copy and paste a bunch of code and have it duplicated, so I went this route:


Ext.define('org.app.GenericConfigurationPanel', {
	extend : 'Ext.form.Panel',
	config: {	    
	    foo : true,
	    bar  : false,
	},
	
    initComponent : function(){
        this.callParent();
    }
    doSomething : function(arg1){
       console.log('doing something with ' + arg1 + '...');
    }
});

Ext.define('org.app.SpecificConfigurationPanel', {
    extend : 'org.app.GenericConfigurationPanel',
    config: {	    
        foo : false,
        bar  : true,
    },
    initComponent : function(){
        this.callParent();
    },

    doSomething : function(arg1){
       this.callParent([arg1]);
       console.log('doing something additional in the overridden class...');
    }
});

Calling doSomething('foobar') on an instance of SpecificConfigurationPanel results in:

doing something with foobar...
doing something additional in the overridden class...

Originally in the subclasses doSomething method I had this.callParent(arg1) which was causing an error when any method was being called on arg1 in the superclass’ method because arg1 was undefined. Passing arg1 as an array in the subclass to the callParent() method seemed to clear up the problem.

Advertisements

Written by Clifton

April 17, 2012 at 1:29 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: