javascript - ExtJS 6.2 无法将插件添加到内部网格 - TypeError : view is undefined

Question

我有一个带有拖放和行编辑插件的网格。当它是一个外部类时，它工作得很好。然而，由于我将网格从类中剥离出来并作为内部组件放置，它开始给我带来错误。如果我注释掉有关插件的代码，它就可以正常工作。

Ext.define('Dashboards.view.widgets.barChartAndLine.BarChartAndLineWidgetForm', {

    extend: 'Dashboards.view.widgets.WidgetBaseForm',

    xtype: 'barChartAndLineWidgetForm',



    items : [{
            xtype: 'grid',
            rowEditing: null,
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop'
                }
            },
        listeners: {
            drop: function() {
                this.updateData();
            }
        },

        initComponent: function() {
            var me = this;
            this.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false,
                listeners: {
                    edit: function() {
                        me.updateData();
                    }
                }
            });
            this.plugins = [this.rowEditing];
            this.callParent(arguments);
        },

        store: {
            fields : ['label', 'linevalue', 'barvalue'],
            bind : {
                data : '{widget.data.data.items}'
            }
        },

        columns: [{
            header: 'Pavadinimas',
            dataIndex: 'label',
            flex: 3,
            editor: {
                allowBlank: false
            }
        }, {
            xtype: 'numbercolumn',
            header: 'Stulpelio reikšmė',
            dataIndex: 'barvalue',
            flex: 1,
            editor: {
                xtype: 'numberfield',
                allowBlank: false
            }
        }, {
            xtype: 'numbercolumn',
            header: 'Linijos reikšmė',
            dataIndex: 'linevalue',
            flex: 1,
            editor: {
                xtype: 'numberfield',
                allowBlank: false
            }
        }, {
            xtype: 'actioncolumn',
            width: 30,
            items: [{
                iconCls: 'x-fa fa-trash',
                tooltip: 'Pašalinti',
                handler: function(g, ri, ci) {
                    var grid = this.up().up();
                    grid.getStore().removeAt(ri);
                    grid.getStore().sync();
                }
            }]
        }],

        tbar: [{
            xtype: 'button',
            text: 'Pridėti',
            handler: function() {
                var grid = this.up().up();
                var r = {
                    label: 'label',
                    linevalue: '0',
                    barvalue: '0'
                };
                var modelResult = grid.getStore().insert(0, r);
            }
        }]

    }]
});

Answer 1

您可以使用网格的配置来设置插件，而不是在 initComponent 函数中添加行编辑插件。

根据您的代码有远程数据，我创建了一个 fiddle要测试 View ，您可以将 View 结构应用于您的数据。

如果您有任何疑问，请告诉我。