ExtJS Classic Grid编程式开启单元格编辑：弃用startEdit后的替代方案

Hey there! Great question—since startEdit is deprecated in ExtJS 6.2.1 Classic for CellEditing, the official recommendation to use the grid's actionable mode is the way to go. Let me break down exactly how to implement this:

The actionable mode system in ExtJS Classic grids handles activating interactive cell content (like editors) in a more consistent way with keyboard navigation. Here's a step-by-step guide to programmatically trigger a cell to enter edit mode:

Step 1: Get References to Key Components #

First, you'll need access to your grid, its actionable mode instance, the target record/row, and target column.

Step 2: Activate the Target Cell #

Use the actionable mode's activateCell method to set the desired cell as the active actionable element. You can call this method with either:

• A record and column object, or
• Row and column indices (0-based)

Example 1: Using Record and Column #

// Get your grid (adjust the selector to match your grid's ID/xtype)
const myGrid = Ext.ComponentQuery.query('#userGrid')[0];
// Retrieve the grid's actionable mode instance
const actionableMode = myGrid.getActionableMode();
// Get the target record from the store (e.g., 2nd row, index 1)
const targetRecord = myGrid.getStore().getAt(1);
// Get the target column by dataIndex (replace with your column's dataIndex)
const targetColumn = myGrid.getColumnManager().getColumnByDataIndex('username');

// Activate the cell
actionableMode.activateCell(targetRecord, targetColumn);

Example 2: Using Row and Column Indices #

const myGrid = Ext.getCmp('userGrid');
const actionableMode = myGrid.getActionableMode();
// Target 3rd row (index 2) and 1st column (index 0)
actionableMode.activateCell(2, 0);

Step 3: Trigger the Editor to Open #

Activating the cell makes it actionable, but to actually open the editor, you can simulate an Enter key press (the standard keyboard shortcut to start editing):

// Create an Enter key event
const enterEvent = new Ext.event.Event({ key: Ext.event.Event.ENTER });
// Pass the event to the actionable mode to trigger editing
actionableMode.handleKeyEvent(enterEvent);

Notes & Tips #

• Ensure your grid has the CellEditing plugin properly configured (e.g., added to the grid's plugins array).
• The actionable mode is only available on Ext.grid.Panel and its subclasses in the Classic toolkit.
• If you need to ensure the editor is focused immediately, the above method handles that automatically since triggering Enter opens and focuses the editor field.
• While the deprecated startEdit method may still work in some versions, using actionable mode aligns with Sencha's current best practices and ensures compatibility with future updates.

内容的提问来源于stack exchange，提问作者Notre