Toggle cell editor after record programmatically added to grid in ExtJS

Question

I'm using ExtJS 4.2.1 and have a fairly simple setup: JSON-based store and a gridpanel that reads from that store. An add button's click event calls out to the function below.

My goal is to add a blank row to the grid and immediately begin editing it using the Ext.grid.plugin.CellEditing plugin that's enabled on the gridpanel.

var addNewRow = function() {
  // start add logic
  var row = {
    'name': '',
    'email': '',
    'description': ''
  };
  store.add(row);

  // start auto-edit logic
  var index = store.indexOf(row); // -1
  var grid = Ext.ComponentQuery.query('gridpanel[itemId=upperPane]')[0];
  var plugin = grid.getPlugin('upperPaneEditor');
  plugin.startEdit( index, 0 );
};

While debugging this, index is set to -1 and that does not work. I tested the plugin.startEdit()'s functionality with (0, 0) to edit the first column of the first row and it works fine. I tried moving the auto-edit logic to various event handlers try to get it to work:

• The store's add event fired after the add and reflected the correct index but the element wasn't present yet in the gridpanel for the plugin to grab it.
• The gridpanel's afterrender event didn't fire after the add
• The gridpanel's add event fired but only after double-clicking on a cell manually to edit it. It also ended up in a loop with itself.

I'm not sure of what else to try at this point.

Answer 1

Your row is a model config object, not a model instance, therefore store.indexOf returns -1.

Try:

var inst = store.add(row)[0];
...
var index = store.indexOf(inst);