当插入多列时，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. 尝试在现有的“公司”列以及“名称1”和“名称2”列中编辑文本

您可以在此处找到完整的源代码和示例： 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