Creating a plugin for ExtJS Grid

Question

I would like to create a plugin that will work on Ext.Grid and allow some operations on it (adding new rows, updating them on some events, etc.). What type of component should my plugin use for best results?

Answer 1

ExtJS Grid provides two ways to add functionality:

• Plugins
• Features

Plugins:. Plugins provide custom features for the component. ExtJS 4 introduced this system so that developers can implement their custom functions into the component. It is defined as an object or an array of an object using the plugins attribute of the grid class.

Basically, a plugin is an ExtJS class, which usually does not require an extension of any ExtJS class. The required part of the plugin class is that it MUST have an init method that the plugin system calls to initialize the plugin. This method should take a parameter (which will be a link to your grid). The init method is supposed to configure all user events (if any) or the connection method that listen for events.

Here is an example of skeletal code:

 Ext.define('Ext.ux.grid.MyPlugin', { alias: 'plugin.ux.muplugin', init: function(grid) { // init events and add listeners... }, customFunction: function(par1, par2) { // some code... }, }); 

Features:. A function is a type of plugin that is available only for the grid panel. The base class for the function is Ext.grid.feature.Feature . You need to extend this class if you plan to create a function.

Here is an example:

 Ext.define('Ext.grid.feature.MyFeature', { extend: 'Ext.grid.feature.Feature', alias: 'feature.myfeature', // other methods.. }); 

This will help you get started.

Answer 2

If you study these plugins in src/grid/plugin/* , they do not specifically extend any base class, like what Ext.form.field.* . So imo, this should be related to what you need to achieve.

For example, both RowEditing and CellEditing extend Editing as their base class to be able to edit the mesh repository, while HeaderReorder and HeaderResizer simply extend Ext.util.Observable , therefore, to achieve common event handling.

It is best to extend Ext.util.Observable if none of the functions have been implemented in any classes in Ext, so at least you can still trigger some events.

Plugins are nothing more than a set of functions added to a Grid object. Correct me if I am wrong;)

Answer 3

Plugins

- These are reusable functionalities that are shared by components. all EXTJS plugins must inherit the Ext.AbstractPlugin class