/** * A selection model for {@link Ext.grid.Panel grid panels} which allows selection of a single cell at a time. * * Implements cell based navigation via keyboard. * * @example * var store = Ext.create('Ext.data.Store', { * fields: ['name', 'email', 'phone'], * data: [ * { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, * { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, * { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' }, * { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } * ] * }); * * Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: store, * width: 400, * renderTo: Ext.getBody(), * columns: [ * { text: 'Name', dataIndex: 'name' }, * { text: 'Email', dataIndex: 'email', flex: 1 }, * { text: 'Phone', dataIndex: 'phone' } * ], * selModel: 'cellmodel' * }); */Ext.define('Ext.selection.CellModel', { extend: 'Ext.selection.DataViewModel', alias: 'selection.cellmodel', requires: [ 'Ext.grid.CellContext' ], /** * @cfg {"SINGLE"} mode * Mode of selection. Valid values are: * * - **"SINGLE"** - Only allows selecting one item at a time. This is the default. */ isCellModel: true, /** * @cfg deselectOnContainerClick * @inheritdoc Ext.mixin.Selectable#cfg!deselectOnContainerClick */ deselectOnContainerClick: false, /** * @cfg {Boolean} enableKeyNav * Turns on/off keyboard navigation within the grid. */ enableKeyNav: true, /** * @cfg {Boolean} preventWrap * Set this configuration to true to prevent wrapping around of selection as * a user navigates to the first or last column. */ preventWrap: false, /** * @event deselect * Fired after a cell is deselected * @param {Ext.selection.CellModel} this * @param {Ext.data.Model} record The record of the deselected cell * @param {Number} row The row index deselected * @param {Number} column The column index deselected */ /** * @event select * Fired after a cell is selected * @param {Ext.selection.CellModel} this * @param {Ext.data.Model} record The record of the selected cell * @param {Number} row The row index selected * @param {Number} column The column index selected */ bindComponent: function(view) { var me = this, grid; // Unbind from a view if (me.view && me.gridListeners) { me.gridListeners.destroy(); } // DataViewModel's bindComponent me.callParent([view]); if (view) { // view.grid is present during View construction, before the view has been // added as a child of the Panel, and an upward link it still needed. grid = view.grid || view.ownerCt; if (grid.optimizedColumnMove !== false) { me.gridListeners = grid.on({ columnmove: me.onColumnMove, scope: me, destroyable: true }); } } }, getViewListeners: function() { var result = this.callParent(); result.refresh = this.onViewRefresh; return result; }, getHeaderCt: function() { var selection = this.navigationModel.getPosition(), view = selection ? selection.view : this.primaryView; return view.headerCt; }, // Selection blindly follows focus. For now. onNavigate: function(e) { // It was a navigate out event. // Or stopSelection was stamped into the event by an upstream handler. // This is used by ActionColumn and CheckColumn to implement their stopSelection config if (!e.record || e.keyEvent.stopSelection) { return; } this.setPosition(e.position); }, selectWithEvent: function(record, e) { this.select(record); }, /** * Selects a cell by row / column. * * var grid = Ext.create('Ext.grid.Panel', { * title: 'Simpsons', * store: { * fields: ['name', 'email', 'phone'], * data: [{ * name: "Lisa", * email: "lisa@simpsons.com", * phone: "555-111-1224" * }] * }, * columns: [{ * text: 'Name', * dataIndex: 'name' * }, { * text: 'Email', * dataIndex: 'email', * hidden: true * }, { * text: 'Phone', * dataIndex: 'phone', * flex: 1 * }], * height: 200, * width: 400, * renderTo: Ext.getBody(), * selType: 'cellmodel', * tbar: [{ * text: 'Select position Object', * handler: function() { * grid.getSelectionModel().select({ * row: grid.getStore().getAt(0), * column: grid.down('gridcolumn[dataIndex=name]') * }); * } * }, { * text: 'Select position by Number', * handler: function() { * grid.getSelectionModel().select({ * row: 0, * column: 1 * }); * } * }] * }); * * @param {Object} pos An object with row and column properties * @param {Ext.data.Model/Number} pos.row * A record or index of the record (starting at 0) * @param {Ext.grid.column.Column/Number} pos.column * A column or index of the column (starting at 0). Includes visible columns only. * @param keepExisting (private) * @param suppressEvent (private) */ select: function(pos, keepExisting, suppressEvent) { var me = this, row, oldPos = me.getPosition(), store = me.view.store; if (pos || pos === 0) { if (pos.isModel) { row = store.indexOf(pos); if (row !== -1) { pos = { row: row, column: oldPos ? oldPos.column : 0 }; } else { pos = null; } } else if (typeof pos === 'number') { pos = { row: pos, column: 0 }; } } if (pos) { me.selectByPosition(pos, suppressEvent); } else { me.deselect(); } }, /** * Returns the current position in the format {row: row, column: column} * @deprecated 5.0.1 This API uses column indices which include hidden columns in the count. Use {@link #getPosition} instead. */ getCurrentPosition: function() { // If it's during a select, return nextSelection since we buffer // the real selection until after the event fires var position = this.selecting ? this.nextSelection : this.selection; // This is the previous Format of the private CellContext class which was used here. // Do not return a CellContext so that if this object is passed into setCurrentPosition, it will be // read in the legacy (including hidden columns) way. return position ? { view: position.view, record: position.record, row: position.rowIdx, columnHeader: position.column, // IMPORTANT: The historic API for columns has been to include hidden columns // in the index. So we must report the index of the column in the "all" ColumnManager. column: position.view.getColumnManager().indexOf(position.column) } : position; }, /** * Returns the current position in the format {row: row, column: column} * @return {Ext.grid.CellContext} A CellContext object describing the current cell. */ getPosition: function() { return (this.selecting ? this.nextSelection : this.selection) || null; }, /** * Sets the current position. * @deprecated 5.0.1 This API uses column indices which include hidden columns in the * count. Use {@link #setPosition} instead. * @param {Ext.grid.CellContext/Object} pos The position to set. May be an object of * the form `{row:1, column:2}` * @param {Boolean} suppressEvent True to suppress selection events * @param {Boolean} preventCheck (private) */ setCurrentPosition: function(pos, suppressEvent, preventCheck) { if (pos && !pos.isCellContext) { pos = new Ext.grid.CellContext(this.view).setPosition({ row: pos.row, // IMPORTANT: The historic API for columns has been to include hidden columns // in the index. So we must index into the "all" ColumnManager. column: typeof pos.column === 'number' ? this.view.getColumnManager().getColumns()[pos.column] : pos.column }); } return this.setPosition(pos, suppressEvent, preventCheck); }, /** * Sets the current position. * * Note that if passing a column index, it is the index within the *visible* column set. * * @param {Ext.grid.CellContext/Object} pos The position to set. May be an object of the form `{row:1, column:2}` * @param {Boolean} suppressEvent True to suppress selection events * @param {Boolean} preventCheck (private) */ setPosition: function(pos, suppressEvent, preventCheck) { var me = this, last = me.selection; // Normalize it into an Ext.grid.CellContext if necessary if (pos) { pos = pos.isCellContext ? pos.clone() : new Ext.grid.CellContext(me.view).setPosition(pos); } if (!preventCheck && last) { // If the position is the same, jump out & don't fire the event if (pos && (pos.record === last.record && pos.column === last.column && pos.view === last.view)) { pos = null; } else { me.onCellDeselect(me.selection, suppressEvent); } } if (pos) { me.nextSelection = pos; // set this flag here so we know to use nextSelection // if the node is updated during a select me.selecting = true; me.onCellSelect(me.nextSelection, suppressEvent); me.selecting = false; // Deselect triggered by new selection will kill the selection property, so restore it here. return (me.selection = pos); } // <debug> // Enforce code correctness in unbuilt source. return null; // </debug> }, isCellSelected: function(view, row, column) { var me = this, testPos, pos = me.getPosition(); if (pos && pos.view === view) { testPos = new Ext.grid.CellContext(view).setPosition({ row: row, // IMPORTANT: The historic API for columns has been to include hidden columns // in the index. So we must index into the "all" ColumnManager. column: typeof column === 'number' ? view.getColumnManager().getColumns()[column] : column }); return (testPos.record === pos.record) && (testPos.column === pos.column); } }, // Keep selection model in consistent state upon record deletion. onStoreRemove: function(store, records, indices) { var me = this, pos = me.getPosition(); me.callParent(arguments); if (pos && store.isMoving(pos.record)) { return; } if (pos && store.getCount() && store.indexOf(pos.record) !== -1) { pos.setRow(pos.record); } else { me.selection = null; } }, onStoreClear: function() { this.callParent(arguments); this.selection = null; }, onStoreAdd: function() { var me = this, pos = me.getPosition(); me.callParent(arguments); if (pos) { pos.setRow(pos.record); } else { me.selection = null; } }, /** * @private * Called when the store is refreshed. * Refresh the current position. * @param {Ext.util.Bag} selected A Collection representing the currently selected records. */ updateSelectedInstances: function(selected) { var pos = this.getPosition(), selRec = selected.getAt(0); // Keep row/record pointer synchronized. // This handler is scheduled before the refresh op // So UI will appear in the correct state. if (selRec && pos && pos.record.id === selRec.id) { pos.setRow(selRec); } this.callParent([selected]); // If the record has been removed, fix up the position. if (selected.length === 0 && selRec) { this.selection = null; } }, /** * Set the current position based on where the user clicks. * @private * IMPORTANT* Due to V4.0.0 history, the cellIndex here is the index within ALL columns, including hidden. */ onCellClick: function(view, cell, cellIndex, record, row, recordIndex, e) { // Record index will be -1 if the clicked record is a metadata record and not selectable if (recordIndex !== -1) { this.setPosition(e.position); } }, // notify the view that the cell has been selected to update the ui // appropriately and bring the cell into focus onCellSelect: function(position, supressEvent) { if (position && position.rowIdx !== undefined && position.rowIdx > -1) { this.doSelect(position.record, /*keepExisting*/false, supressEvent); } }, // notify view that the cell has been deselected to update the ui // appropriately onCellDeselect: function(position, supressEvent) { if (position && position.rowIdx !== undefined) { this.doDeselect(position.record, supressEvent); } }, onSelectChange: function(record, isSelected, suppressEvent, commitFn) { var me = this, pos, eventName, view; if (isSelected) { pos = me.nextSelection; eventName = 'select'; } else { pos = me.selection; eventName = 'deselect'; } // CellModel may be shared between two sides of a Lockable. // The position must include a reference to the view in which the selection is current. // Ensure we use the view specified by the position. view = pos.view || me.primaryView; if ((suppressEvent || me.fireEvent('before' + eventName, me, record, pos.rowIdx, pos.colIdx)) !== false && commitFn() !== false) { if (isSelected) { view.onCellSelect(pos); } else { view.onCellDeselect(pos); delete me.selection; } if (!suppressEvent) { me.fireEvent(eventName, me, record, pos.rowIdx, pos.colIdx); } } }, refresh: function() { var pos = this.getPosition(), selRowIdx; // Synchronize the current position's row with the row of the last selected record. if (pos && (selRowIdx = this.store.indexOf(this.selected.last())) !== -1) { pos.rowIdx = selRowIdx; } }, /** * @private * When grid uses {@link Ext.panel.Table#optimizedColumnMove optimizedColumnMove} (the default), this is added as a * {@link Ext.panel.Table#columnmove columnmove} handler to correctly maintain the * selected column using the same column header. * * If optimizedColumnMove === false, (which some grid Features set) then the view is refreshed, * so this is not added as a handler because the selected column. */ onColumnMove: function(headerCt, header, fromIdx, toIdx) { var grid = headerCt.up('tablepanel'); if (grid) { this.onViewRefresh(grid.view); } }, onUpdate: function(record) { var me = this, pos; if (me.isSelected(record)) { pos = me.selecting ? me.nextSelection : me.selection; me.view.onCellSelect(pos); } }, onViewRefresh: function(view) { var me = this, pos = me.getPosition(), newPos, headerCt = view.headerCt, record, column; // Re-establish selection of the same cell coordinate. // DO NOT fire events because the selected if (pos && pos.view === view) { record = pos.record; column = view.getColumnByPosition(pos); // After a refresh, recreate the selection using the same record and grid column as before if (column && !column.isDescendantOf(headerCt)) { // column header is not a child of the header container // this happens when the grid is reconfigured with new columns // make a best effort to select something by matching on id, then text, then dataIndex column = headerCt.queryById(column.id) || headerCt.down('[text="' + column.text + '"]') || headerCt.down('[dataIndex="' + column.dataIndex + '"]'); } // If we have a columnHeader (either the column header that already exists in // the headerCt, or a suitable match that was found after reconfiguration) // AND the record still exists in the store (or a record matching the id of // the previously selected record) We are ok to go ahead and set the selection if (column && record) { if (view.store.indexOfId(record.getId()) !== -1) { newPos = new Ext.grid.CellContext(view).setPosition({ row: record, column: column }); me.setPosition(newPos); } } else { me.selection = null; } } }, /** * @private * Used internally by CellEditing */ selectByPosition: function(position, suppressEvent) { this.setPosition(position, suppressEvent); }});