插入多列时，Ext JS 4.0 GridPanel CellEditing 插件中断

Question

我正在尝试找到在 Ext JS 4.0 中使用 CellEditing 插件的 GridPanel 中动态添加/删除列的正确方法

我尝试使用 HeaderContainer add()、insert()、remove() 方法在 GridPanel 中动态添加/删除列

问题是当我尝试添加或删除多个列时，CellEditing 插件停止正常工作：

1. 当现有单元格处于编辑模式时，文本和光标不可见
2. 第一个新添加的列根本不可编辑
3. 第二个添加的列是可编辑的

重现步骤：

1. 开始页面
2. 选择列中的单元格以插入列位置，在该列位置之前添加新列
3. 单击添加列按钮并在对话框中键入 Name1，然后按确定
4. 重复步骤 2-3 使用 Name2 作为列名
5. 尝试在现有 Company 列以及 Name1 和 Name2 列中编辑文本

您可以在此处找到完整的源代码和示例： http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview

你能重现这种行为吗？ 你能确认这是错误吗？ 还是我做错了什么？

如果您能提供任何帮助，我将不胜感激

Answer 1

你是对的，有一个错误，但显然它是由你重新配置网格的方式引起的，我对你的代码添加了一些修改（仅用于添加列）我想删除应该相当容易，所以我的更正：

1. 存储 rangeData 的内存数据是一个数组，而读者期待一个在 items 属性中包含数组的 Object（这似乎没有导致任何错误，但这样更清晰）
2. 列重新配置是主要问题，我删除了创建新列的部分，只为新列编写配置，然后在列数组的末尾或中间的某个位置添加新列使用拼接。网格上的重新配置功能提供了重新配置存储和列的可能性，因此比在标题容器中添加新创建的列更安全。

这里有修改后的代码http://jsbin.com/otorix/17/edit