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

Question

I requires Ext.grid.plugin.Editable in my grid. Now I want to change classes inside default panel, witch slides right for editing of row.
But I don't understand how I to manage submit and delete button function (for example I want to define POST for submit button).
toolbarConfig - doesn't work
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

Here is an example of a grid with a custom form:
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
]
});
}
});