/** * 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: * * Ext.create({ * xtype: 'grid', * fullscreen: true, * * title: 'My Grid', * * plugins: { * rowoperations: { * operation: { * text: 'Archive', * handler: 'onRowOperation', * ui: 'alt' * } * } * }, * * store: store * * columns: [ * // columns * ] * }); * * 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}. */Ext.define('Ext.grid.plugin.RowOperations', { extend: 'Ext.plugin.Abstract', alias: [ 'plugin.rowoperations', // legacy compat names: 'plugin.multiselection', 'plugin.gridmultiselection' ], alternateClassName: 'Ext.grid.plugin.MultiSelection', config: { /** * @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 */ operation: { lazy: true, $value: { xtype: 'button', ui: 'alt decline', align: 'right', handler: 'me.onOperationTap', margin: '0 0 0 10' } }, /** * @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 */ selectButton: { lazy: true, $value: { xtype: 'button', ui: 'alt', align: 'right', margin: '0 0 0 10' } }, /** * @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. */ selectionColumn: { sortable: false }, /** * @cfg {Boolean} useTriggerButton * 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. */ useTriggerButton: true, /** * @cfg {String} triggerText * The text of the button used to display the `operation` and the `selectionColumn`. */ triggerText: 'Select', /** * @cfg {String} cancelText * The text of the button used to hide the `operation` and the `selectionColumn`. */ cancelText: 'Done', /** * @cfg {String} deleteText * The text of the button used to delete selected rows. */ deleteText: 'Delete', /** * @cfg {Boolean} disableSelection * Set to `true` to disable selection styling on the owning grid when not in * selection mode. * @since 6.5.0 */ disableSelection: true, /** * @cfg {Boolean} selecting * Setting this config to `true` will show the `operation` and `selectionColumn` * while settings it `false` will hide them. * @private * @since 6.5.0 */ selecting: null }, init: function (grid) { if (!this.useSelectButton()) { this.setSelecting(true); } if (this.getDisableSelection()) { grid.setDisableSelection(true); } }, destroy: function () { this.setOperation(null); this.setSelectButton(null); this.callParent(); }, getRecords: function () { var grid = this.cmp; return grid.getSelections(); }, onOperationTap: function () { this.deleteSelectedRecords(); }, onTriggerTap: function() { this.setSelecting(!this.getSelecting()); }, // operation applyOperation: function (config, button) { return Ext.updateWidget(button, config, this, 'createOperation'); }, createOperation: function (config) { var me = this, ret = Ext.apply({ text: me.getDeleteText() }, config); ret.plugin = me; if (ret.handler === 'me.onOperationTap') { ret.handler = 'onOperationTap'; ret.scope = me; } return ret; }, updateOperation: function (operation) { if (operation) { var selectButton = this.useSelectButton(), titleBar = this.cmp.getTitleBar(), container; if (titleBar) { if (selectButton) { container = selectButton.getParent(); titleBar.insert(container.indexOf(selectButton), operation); } else { titleBar.add(operation); } } } }, // selectButton applySelectButton: function (config, button) { return Ext.updateWidget(button, config, this, 'createSelectButton'); }, createSelectButton: function (config) { var me = this, ret = Ext.apply({ text: me.getTriggerText() }, config); ret.handler = 'onTriggerTap'; ret.scope = me; return ret; }, updateSelectButton: function (selectButton) { if (selectButton) { this.cmp.getTitleBar().add(selectButton); } }, updateSelecting: function (selecting) { var me = this, grid = me.cmp, disableSelection = me.getDisableSelection(), operation = me.getOperation(), selectButton = me.useSelectButton(), selectionModel = grid.getSelectable(); if (operation) { operation.setHidden(!selecting); } if (selectButton) { selectButton.setText(selecting ? me.getCancelText() : me.getTriggerText()); } if (disableSelection) { grid.setDisableSelection(!selecting); } selectionModel.setCheckbox(selecting && me.getSelectionColumn()); selectionModel.setMode(selecting ? 'multi' : 'single'); if (disableSelection || !selecting) { selectionModel.deselectAll(); } }, privates: { deleteSelectedRecords: function () { var records = this.getRecords(), store = this.cmp.getStore(); store.remove(records); }, useSelectButton: function () { var me = this, titleBar = me.cmp.getTitleBar(); return me.getUseTriggerButton() && titleBar && titleBar.getTitle() && me.getSelectButton(); } }});