ExtJS 6.2无法将插件添加到内部网格 - TypeError:视图未定义

时间:2016-10-03 15:07:33

标签: javascript extjs extjs6

我有一个带有拖动&删除和行编辑插件的网格。当它是外部阶级时,它被罚款。但是,由于我将网格划分为一个类并将其作为内部组件,因此它开始给我错误。如果我注释掉有关插件的代码,它可以正常工作。

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);
            }
        }]

    }]
});

1 个答案:

答案 0 :(得分:1)

您可以使用网格配置设置插件,而不是在initComponent函数中添加rowediting插件。

根据您的代码有远程数据,我创建了一个fiddle来测试视图,您可以将视图结构与您的数据一起应用。

如果您有任何疑问,请与我联系。