How to implement plugin in ExtJs grid

Question

I want to implement a plugin in extjs grid but its not rendering.

Tried with below code but not working for me, no error on console.

Ext.define('xyz', {
extend: 'Ext.grid.Panel',
xtype: 'mytype',
requires: [
    'Store',
    'ServerFilterPlugin' // plugin
],
config: {
    filterView: 'displayfilterconfig'
},
plugins: [Ext.create('plugin.serverFilterPlugin')], //even tried with below way to implemet plugin but that is also not working
//plugins: [{
//  ptype: 'serverFilterPlugin',
//  orderIndex: 10,
//  filterView: 'displayfilterconfig'
//}],

Plugin:

Ext.define('ServerFilterPlugin', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.serverFilterPlugin',
    requires: [
        'DisplayToolbar',
        "StoreLoadMonitor"
    ],
    init: function (grid) {
        var me = this;

How to fix it, how to get debugger in init of plugin?

Answer 1

In your code plugin does not produce any action to check if it works or not. Here is a code of working plugin for grid. It adds a toolbar to grid.

Ext.define('ServerFilterPlugin', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.serverFilterPlugin',
    requires: [
    ],
    init: function (grid) {
        console.log('orderIndex: ', this.orderIndex);
        console.log('filterView: ', this.filterView);
        console.log('Number of rows: ', grid.getStore().getCount());
        this.addCustomToolbar();
    },

    addCustomToolbar: function() {
        this.getCmp().addDocked({
            xtype: 'toolbar',
            items: [{
                text: "Left Button"
            }, '->', {
                text: "Right Button"
            }]
        })
    }
});

Fiddle