/** * @class Ext.grid.plugin.Editable * @extend Ext.plugin.Abstract * @alias plugin.grideditable * * The Editable plugin injects editing at a row level for Modern Toolkit's * Grid. Editing begins by double-tapping a row. This can be set to any event, which we'll * discuss below. The editor consists of a small positioned dialog that be shown on the right * side of your viewport. * * There is a button to save or cancel all changes for the edit in the toolbar, and the * row is deletable by default. * * The default editable grid can be defined like so: * * @example packages=[reactor] * import React, { Component } from 'react' * import { Grid } from '@extjs/ext-react'; * * export default class MyExample extends Component { * * store = Ext.create('Ext.data.Store', { * data: [ * { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, * { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, * { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" }, * { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" } * ] * }); * * render() { * return ( * <Grid * layout="fit" * store={this.store} * plugins={[ * { type: 'grideditable' } * ]} * columns={[ * { * text: "Name", * dataIndex: "name", * flex: 1 * }, * { * text: "Email", * dataIndex: "email", * flex: 1 * }, * { * text: "Phone", * dataIndex: "phone", * flex: 1 * } * ]} * /> * ) * } * } * * ##Modifying the Editor * * You can easily modify nearly every piece of the editor window. The toolbar and delete * button are the only components included by default. That's where formConfig comes into play. * * By adding formConfig, you can dictate the form of the form that gets created when editing a row. * There are no fields set on the form initially, so you will need to define them * yourself. For example, if you had a "name" column, and you wanted it to be editable, * you would do something like this in your plugins object: * * formConfig: { * items: [{ * xtype: 'textfield', * name: 'name', * label: 'Name' * }] * } * * Now, upon opening the editor, you would see a textfield populated with the editable value from * its corresponding record. * * If you want to alter certain form configurations, but still have the default editor fields applied, use * the defaultFormConfig instead. */ /** * @cfg {String} [triggerEvent='doubletap'] * The event used to trigger the showing of the editor form. * @accessor */ /** * @cfg {Object} [formConfig=null] * By changing the formConfig you can hardcode the form that gets created when editing a row. * Note that the fields are not set on this form, so you will have to define them yourself in this config. * If you want to alter certain form configurations, but still have the default editor fields applied, use * the defaultFormConfig instead. * @accessor */ /** * @cfg {Object} defaultFormConfig * Configures the default form appended to the editable panel. * @accessor */ /** * @cfg {Object} toolbarConfig * Configures the toolbar appended to the editable panel. * @accessor */ /** * @cfg {Boolean} [enableDeleteButton=true] * Creates a delete button, which allows the user to delete the selected row. * @accessor */