如何在ExtJs网格中实现插件

时间:2020-06-30 08:43:17

标签: extjs extjs-grid extjs7

我想在extjs网格中实现一个插件,但无法渲染。

尝试以下代码,但对我不起作用,控制台上没有错误。

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'
//}],

插件:

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

如何修复它,如何在插件的init中获得调试器?

1 个答案:

答案 0 :(得分:1)

在您的代码插件中,不会产生任何操作来检查其是否有效。这是网格工作插件的代码。它将工具栏添加到网格。

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