Ext JS 4.0 GridPanel CellEditing plugin breaks when multiple columns inserted

Question

I am trying to find the proper way to dynamically add/remove columns in a GridPanel that uses CellEditing plugin in Ext JS 4.0

I tried to add/remove columns dynamically in a GridPanel, using the HeaderContainer add(), insert(), remove() methods

The problem is that CellEditing plugin stops working correctly when I try to add or remove more than one column:

1. when existing cell in edit mode the text and cursor is not visible
2. first newly added column is not editable at all
3. second added column is editable

Steps to reproduce:

1. start the page
2. select cell in the column to insert column position before which to add new column
3. click add column button and type Name1 in dialog press ok
4. repeat steps 2-3 Using Name2 as column name
5. try to edit text in existing Company column and in column Name1 and Name2

You can find the full source code and example here: http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview

Can you reproduce this behavior? Can you confirm this as bug? Or what am I doing wrong?

I will be grateful for any help you can provide

Answer 1

you were right, there was a bug, but apparently it was induced by the way you reconfigured your grid, I added some modifications to your code ( just for the add column) i guess the remove should be fairly easy, so my corrections:

1. the memory data for the store rangeData was an array , while the reader was expecting an Object with an array inside an items attribute (this didn't seem to cause any errors but it's much clearer this way)
2. The column reconfigure was the main issue, i removed the part where you create a new column and just write the config for the new column, after that added the new column at the end of your column array, or somewhere in the middle using splice. The reconfigure function on the grid offers the posibility to reconfigure the store and the columns so is safer then adding the newly created column in the header container.

you have the modified code here http://jsbin.com/otorix/17/edit