[su_icon_text icon=”icon: info-circle” icon_color=”#5b63df” class=”saki-info-box”]Code in this post can be obsolete, however, principles and theory may still apply.[/su_icon_text]

Preface

I believe that many of Ext users have already thought about adding some custom functionality that is not present in core Ext Library to a class. Something that is specific to their applications or not that specific so that others could also be interested in such feature.

OK, we have the idea, we know what the new code should do, we even know how to write it, but what should we write? An Extension or a Plugin?

Extensions and Plugins

The fact we are talking about them together and the fact that we can be even indecisive which one to use infers that they must have something in common. True, they have. They both add some functionality to an existing library or modify a feature of the library.

Neither extension nor plugin can exist standalone; they have to have a component, a class, they extend or plug into.

Extension

An extension (in Ext world) is a derived class in fact. Let’s imagine we have a basic class with some general methods to which we want to add some more specific methods. So, using the inheritance framework of an library or a language we create new class that contains methods of both basic class and new added methods.

We choose an existing Ext class, we extend it using Ext.extend function and the result is new class with new name. For example:

MyExtension = Ext.extend(Ext.Panel, {/* object with new properties and methods */});

Later on, when we need an object:

var myExtension = new MyExtension({/* optional configuration object */});

Plugin

Plugin does not need any exiting Ext class to exist. Although plugins often extend Ext.util.Observable it is not a must; they can be written from scratch. Sure, writing a plugin without having a target we want to plug it in has no sense so we always write plugins for an existing Ext class: panel, form, grid, data view, etc.

For example, we create plugin as:

MyPlugin = function() {/* code */};

And then we use it this way:

var myPanel = new Ext.Panel({
     plugins:[new MyPlugin({/* optional config object */})]
    ,// rest of myPanel configuration
});

Extension or Plugin?

It depends… You can often achieve same result with extension or with plugin. Sometimes it is only that programmer likes plugins more so he writes a plugin or he likes extensions more so he writes an extension. However, plugins are more suitable for adding smaller features and extensions are more suitable for adding more complex functionalities. Plugins can be easily removed from components, extensions are usually more tied to applications.

Summary

• An extension is a new class with a new name, based on an existing base class and created at definition time. Extension must be instantiated as any other class to work.
• Plugin plugs into an existing class, is easily removed, is defined during definition time and is initialized during base class initialization.

Further reading

• Extending an Ext Class
• Writing an Ext Plugin