From Learn About the Ext JavaScript Library

Contents 1 Preface 2 Extensions and Plugins 3 Extension 4 Plugin 5 Extension or Plugin? 6 Summary 7 Further reading

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 a library or a language we create a new class that contains both methods of the basic class and new added methods.

We choose an existing Ext class, we extend it using the Ext.extend function, and the result is a new class with a 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

A plugin, on the other hand, does not need any existing Ext class. 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 a 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 an extension or with a plugin. Sometimes it is only that a 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, while 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. An extension must be instantiated as any other class to work.
• A plugin plugs into an existing class, is easily removed, is defined during definition time, and is initialized during base class initialization.

Further reading

• Same article in my blog. You can comment it there.
• Extending an Ext Class
• Writing an Ext Plugin