/** * @class Ext.grid.plugin.RowOperations * @extend Ext.plugin.Abstract * @alias plugin.rowoperations * * The RowOperations plugin enables user to select rows in a {@link Ext.grid.Grid grid} and * then perform an operation (e.g. Delete) on them. This plugin adds a "Select" button * to the grid's title to start the selection process. This button is replaced by "Done" * while in selection mode. When selecting an extra `operation` button is displayed. By * default this button can be used to delete records. * * In addition, this plugin will ensure that the {@link Ext.grid.Grid#cfg!selectable checkbox} * selection method is enabled. The {@link #selectionColumn} config of this plugin can be * used to control this configuration. * * Customizing the RowOperations plugin to provide operations other then "Delete" can * be done with the `operation` config: * * @example packages=[extangular] * import { Component } from '@angular/core' * declare var Ext: any; * * Ext.require('Ext.grid.plugin.RowOperations'); * @Component({ * selector: 'app-root-1', * styles: [` * `], * template: ` * <container #item layout="fit"> * <grid #item * [height]="'600px'" * (ready)="gridReady($event)" * [store]="store" * title="People" * [plugins]="{ * rowoperations: { * operation: { * text: 'Archive', * handler: this.archiveSelected, * ui: 'alt' * } * } * }" * > * <column #item text="First Name" dataIndex="fname" flex="1"></column> * <column #item text="Last Name" dataIndex="lname" flex="1"></column> * <column #item text="Talent" dataIndex="talent" flex="1"></column> * </grid> * </container> * ` * }) * export class AppComponent { * gridRef:any; * store = Ext.create('Ext.data.Store', { * data: [ * { 'fname': 'Barry', 'lname': 'Allen', 'talent': 'Speedster' }, * { 'fname': 'Oliver', 'lname': 'Queen', 'talent': 'Archery' }, * { 'fname': 'Kara', 'lname': 'Zor-El', 'talent': 'All' }, * { 'fname': 'Helena', 'lname': 'Bertinelli', 'talent': 'Weapons Expert' }, * { 'fname': 'Hal', 'lname': 'Jordan', 'talent': 'Willpower' }, * ] * }); * * gridReady = (ele) => { * this.gridRef = ele.ext; * } * * archiveSelected = () => { * const selected = this.gridRef.getSelected().items * .map(record => `${record.get('fname')} ${record.get('lname')}`) * .join(', '); * * console.log(`Archived ${selected}`) * } * } * * * Since the `operation` is a {@link Ext.Button button}, multiple operations can easily be * provided using the button's {@link Ext.Button#cfg!menu menu}. */ /** * @cfg {Object/Ext.Button} operation * This button is displayed when the `selectButton` is tapped. By default it is * a "Delete" button (see `deleteText`). This button can be customized to perform * other operations than delete by replacing the `handler` (or using a `menu`). * @since 6.5.0 * @accessor */ /** * @cfg {Object/Ext.Button} selectButton * This config drives the "Select" button added to the grid's title bar. This * button's handler is provided by the plugin and toggles the visibility of the * `operation` button. * @since 6.5.0 * @accessor */ /** * @cfg {Object} selectionColumn * The default settings for the selection column. Used as a config object for the * {@link Ext.grid.selection.Model#checkbox}. You may provide a value for this * config in order to: * * + Change column width * + Show the selectionColumn by default * + Change the default cls or cellCls * + Etc. * @accessor */ /** * @cfg {Boolean} [useTriggerButton=true] * Determines whether or not the trigger button is show when the grid is loaded. * This most commonly be set to false if you wanted to have the selectionColumn * shown 100% of the time instead of hidden by default. You could show the {@link #selectionColumn} * by modifying its hidden value to be false. * @accessor */ /** * @cfg {String} [triggerText="Select"] * The text of the button used to display the `operation` and the `selectionColumn`. * @accessor */ /** * @cfg {String} [cancelText="Done"] * The text of the button used to hide the `operation` and the `selectionColumn`. * @accessor */ /** * @cfg {String} [deleteText="Delete"] * The text of the button used to delete selected rows. * @accessor */