GridPanel CellEditing plugin breaks when multiple columns inserted

[jscripter]

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 as suggested in How to add columns in grid panel by clicking on add column button in extjs 4 thread

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

[mitchellsimoens]

Have you tried the reconfigure method on the grid?

[jscripter]

Have you tried the reconfigure method on the grid?

yes, of course

add column button handler:

                handler: function(){
                    var grid = companyGrid;
                    
                    Ext.MessageBox.prompt("Specify Column Name", "Column Name", function(button, columnName){
                        if (button == "ok") {
                            
                            var store = grid.getStore();
                            var range = store.getRange();
                            var rangeData = [];
                            
                            Ext.Array.each(range, function(item, index, array){
                                item.data[columnName] = '';
                                rangeData.push(item.data);
                            });
                            
                            companyStoreFields.push({
                                name: columnName
                            });
                            
                            modelCounter += 1;
                            var modelName = 'Company' + modelCounter;
                            
                            Ext.define(modelName, {
                                extend: 'Ext.data.Model',
                                fields: companyStoreFields
                            });
                            
                            var companyStore = Ext.create('Ext.data.Store', {
                                model: modelName,
                                data: rangeData,
                                proxy: {
                                    type: 'memory',
                                    reader: {
                                        type: 'json',
                                        root: 'items'
                                    }
                                }
                            });
                            
                            var column = Ext.create('Ext.grid.column.Column', {
                                text: columnName,
                                dataIndex: columnName,
                                editor: {
                                    xtype: 'textfield'
                                }
                            });
                            
                            if (!gridColumn) {
                                grid.headerCt.add(column);
                            }
                            else {
                                grid.headerCt.insert(gridColumn, column);
                            }

                            grid.reconfigure(companyStore);
                        }
                    });
                }