Extjs 如何配置Ext.grid.plugin.Editable按钮？

我需要

Ext.grid.plugin.Editable

在我的网格中。现在我想更改默认面板中的类，它可以向右滑动以编辑行。 但我不明白如何管理提交和删除按钮功能（例如，我想为提交按钮定义POST）。 工具栏配置-不工作

Ext.define('Foresto.model.EditListRenters', {
  extend: 'Ext.grid.Grid',
  xtype: 'rentlist',
  requires: [ //some plugins and models
  ],
  frame: true,
  store: {
    model: 'Foresto.model.RentsListModel',
    autoLoad: true,
    pageSize: 0,
    proxy: {
      type: 'ajax',
      url: '/api/renter/',
      reader: {
        type: 'json',
        rootProperty: 'results'
      }

    }
  },
  plugins: [{
      type: //someplugins}
    ],
    /* toolbarConfig: {
    xtype:'titlebar',
    docked:'top',
    items:[{
    xtype:'button', // it is don't work
    ui:'decline',
    text:'decline',
    align: 'right',
    action:'cancel'
    }]
    }, */

    columns: [{
      text: 'id',

      dataIndex: 'id'
    }, {
      text: 'document',
      dataIndex: 'document',
      editable: true,
      flex: 1

    }, {
      text: 'document_num',
      dataIndex: 'document_num',
      editable: true
    }, {
      text: 'legal_type',
      dataIndex: 'legal_type',
      editable: true

    }, {
      text: 'fio_represent',
      dataIndex: 'fio_represent',
      editable: true
    }, {
      text: 'position_represent',
      dataIndex: 'position_represent',
      editable: true,
    }, {
      text: 'certificate',
      dataIndex: 'certificate',
      editable: true,
    }]
  });

---

以下是具有自定义表单的网格示例：

---

你的问题不是很清楚。您想要网格的行编辑器、单元格编辑器还是自定义编辑器？或者只是用一个可以编辑行的窗体滑入一个面板？我的意思是：“用一个可以编辑行的窗体滑入一个面板”没有现成的插件。您必须：-创建一个表单（其中包含所有字段）-向左或向右停靠它-当您单击或双击记录时让它展开/显示。-然后，您必须获取所选记录并将其设置或绑定到表单。或者，如果您不愿意这样做，您可以使用行编辑器？不过，您仍然需要在每个字段上定义一个编辑器。谢谢。但是这个插件需要什么呢？只是为了展示机会？我真的不明白为什么，如果我们必须创建一些新的类和函数来实现用于编辑网格行的slideform

// model
Ext.define('Fiddle.model.Document', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'document',
        type: 'string'
    }, {
        name: 'type',
        type: 'string'
    }]
});

//view (grid)
Ext.define('Fiddle.view.DocumentGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'documentlist',

    store: {
        model: 'Fiddle.model.Document',
        data: [{
            id: 1,
            document: 'My First Doc',
            type: 'pdf'
        }, {
            id: 2,
            document: 'My Second Doc',
            type: 'pdf'
        }]
    },

    columns: [{
        text: 'id',
        dataIndex: 'id'
    }, {
        text: 'Document',
        dataIndex: 'document',
        flex: 1
    }, {
        text: 'Type',
        dataIndex: 'type',
    }]
});

var form = Ext.create('Ext.form.Panel', {
    title: 'Form',
    region: 'east',
    layout: {
        type: 'vbox',
        algin: 'stretch'
    },
    collapsible: true,
    bodyPadding: 10,
    hidden: true,
    items: [{
        xtype: 'textfield',
        name: 'document',
        fieldLabel: 'Document'
    }, {
        xtype: 'combo',
        name: 'type',
        fieldLabel: 'type',
        store: ['pdf', 'doc', 'docx', 'odf']
    }],
    buttons: [{
        text: 'Save',
        handler: function () {
            form.updateRecord();
            form.hide();
        }
    }]

});

var grid = Ext.create('Fiddle.view.DocumentGrid', {
    title: 'Document Grid',
    region: 'center',
    listeners: {
        selectionchange: function (selModel, selection) {
            if (Ext.isEmpty(selection)) {
                form.hide();
                return;
            }
            form.loadRecord(selection[0]);
            form.show();
        }
    }

});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            layout: 'fit',

            layout: 'border',
            width: 600,
            height: 600,
            items: [
                grid, form
            ]

        });
    }
});