以编程方式将记录添加到 ExtJS 中的网格后切换单元格编辑器

Posted 2023-02-26

【中文标题】以编程方式将记录添加到 ExtJS 中的网格后切换单元格编辑器

【英文标题】：Toggle cell editor after record programmatically added to grid in ExtJS

【发布时间】：2013-07-22 21:06:08

【问题描述】：

我正在使用 ExtJS 4.2.1 并且有一个相当简单的设置：基于 JSON 的存储和从该存储读取的网格面板。添加按钮的点击事件调用下面的函数。

我的目标是在网格中添加一个空白行并立即开始使用网格面板上启用的Ext.grid.plugin.CellEditing 插件对其进行编辑。

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 );
;

在调试时，索引设置为 -1，这不起作用。我用 (0, 0) 测试了 plugin.startEdit() 的功能来编辑第一行的第一列，它工作正常。我尝试将自动编辑逻辑移至各种事件处理程序以使其正常工作：

商店的 add 事件在添加后触发并反映了正确的索引，但该元素尚未出现在网格面板中以供插件抓取。 网格面板的 afterrender 事件在添加后没有触发 gridpanel 的add 事件被触发，但只有在手动双击单元格进行编辑后才会触发。它也与自己陷入了循环。

目前我不确定还可以尝试什么。

【参考方案1】：

您的 row 是模型配置对象，而不是模型实例，因此 store.indexOf 返回 -1。

试试：

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