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

Question

我需要 Ext.grid.plugin.Editable 在我的网格中。现在我想在默认面板中更改类，向右滑动以编辑行。但我不明白如何管理提交和删除按钮功能（例如我想为提交按钮定义 POST ）。 toolbarConfig - 不起作用

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

Answer 1

这是一个带有自定义表单的网格示例：

https://fiddle.sencha.com/#view/editor&fiddle/2ojt

// 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
            ]

        });
    }
});

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

How to configurate Ext.grid.plugin.Editable buttons?

extjs

extjs4

sencha-touch