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:
|
1 |
MyExtension = Ext.extend(Ext.Panel, {/* object with new properties and methods */}); |
Later on, when we need an object:
|
1 |
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:
|
1 |
MyPlugin = function() {/* code */}; |
And then we use it this way:
|
1 2 3 4 |
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
- Ext, Angular, React, and Vue - June 27, 2019
- The Site Resurgence - February 11, 2018
- Configuring ViewModel Hierarchy - June 19, 2015
Hi Saki,
Its gave me the basic idea of writing the Plugin or extend. Thanks
Thanks for the pointers Saki, certainly helps clear things up when wanting to develop upon existing Ext functionality.
As an additional question, if you feel some functionality is suitable for the general community and not application specific, which would you say is the most accessible to users who wish to incorperate this new functionality in their app. Do you think most users would prefer to USE an extension or a plugin?