當插入多列時，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