Building plugin for ExtJS Grid

Question

I'd like to build a plugin, that will operate 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 extend to achieve best results ?

Answer 1

ExtJS Grid provides two ways of adding functionality:

1. Plugins
2. Features

Plugins: Plugins provide custom functionality for the component. ExtJS 4 introduced this system so that, developers can inject their custom features to the component. It is specified as an object or array of object using the plugins attribute of grid class.

Basically, a plugin is a ExtJS class that usually don't need to extend any ExtJS class. The mandatory part of the plugin class is that, it SHOULD have a init method that the plugin system calls to initialize the plugin. This method should take a parameter (which will be a reference to your grid). The init method is supposed to configure all the custom events (if any) or hook up method that listen to events.

Here is a sample skeleton 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: Feature is a type of plugin which is only available for the grid panel. The base class for a feature is Ext.grid.feature.Feature. You need to extend this class if you are planning to create a feature.

Here is a sample:

Ext.define('Ext.grid.feature.MyFeature', {    
    extend: 'Ext.grid.feature.Feature',

    alias: 'feature.myfeature',

    // other methods..

}); 

This should help you get started.

Answer 2

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

For example, both RowEditing and CellEditing extends Editing as their base class to have the ability to edit grid's store, whereas HeaderReorder and HeaderResizer just extends Ext.util.Observable so to achieve common event handling.

Best bet is to extend Ext.util.Observable if none of the functionalities has been implemented in any given classes in Ext, so at least you can still fire up some events.

Plugins is nothing but set of functions added to a Grid object. Correct me if I'm wrong ;)

Answer 3

plugins are reusable functionality that are shared across components. all the EXTJS plugins should inherit the class Ext.AbstractPlugin