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.