Column layout of Grid gets broken when using itemId in column definition

Ext version tested:

4.2.2.1144

Browser versions tested against:

Should be in every browser version, tested in IE 9, IE 8, FF24 (...)

Description

• Load test case


• Change size of column firstName of grid in viewport


• Click on button "Open Grid Dialog"


• RESULT: the layout of the columns of the viewport grid are broken

Screen

Look at attached file "Zwischenablage01.jpg"

Zwischenablage01.jpg

Testcase:

Code:

Ext.define('User', {
                extend: 'Ext.data.Model',
                fields: [
                        {name: 'id', type: 'string'},   
                        {name: 'firstName', type: 'string'},
                        {name: 'lastName',  type: 'string'},
                        {name: 'age',       type: 'int'},
                        {name: 'eyeColor',  type: 'string'}
                ]
        });
         
        Ext.define('UserStore', {
                extend: "Ext.data.Store",
                model: 'User',
                data : [
                        {firstName: 'Michael',    lastName: 'Mayer', id: "aaa", age: 35, eyeColor: "brown"},
                        {firstName: 'Bob', lastName: 'Panthera', id: "bbb", age: 36, eyeColor: "green"},
                        {firstName: 'Sven', lastName: 'Müller', id: "ccc", age: 37, eyeColor: "blue"}
                ]
        });
        
        
        Ext.define("BaseGrid",{
                extend: "Ext.grid.Panel",
                constructor: function (cfg){
                        cfg = Ext.apply({}, cfg, {
                                columns: this.getCols(cfg).getRange()
                        });
                        this.callParent([cfg]);
                },
                getCols: function (){
                        var items = new Ext.util.MixedCollection(false, function (item){
                                return item.itemId;
                        });
                        
                        items.add({
                                dataIndex: "id",
                                itemId: "id",
                                header: "id"
                        });
                        
                        items.add({
                                dataIndex: "firstName",
                                itemId: "firstName",
                                header: "firstName"
                        });
                        
                        items.add({
                                dataIndex: "lastName",
                                itemId: "lastName",
                                header: "lastName"
                        });
                        
                        items.add({
                                dataIndex: "age",
                                itemId: "age",
                                header: "age"
                        });
                        
                        items.add({
                                dataIndex: "eyeColor",
                                itemId: "eyeColor",
                                header: "eyeColor"
                        });
                        return items;
                }
        });
        
        Ext.define("GridViewport",{
                extend: "BaseGrid",
                xtype: "grid-viewport"
        });
        
        Ext.define("GridDialog",{
                extend: "BaseGrid",
                xtype: "grid-dialog"
        });
        
        Ext.onReady(function (){
        
                var win = false;
        
                Ext.create("Ext.container.Viewport", {
                        layout: "fit",
                        items: [
                                {
                                        title: "Grid",
                                        xtype: "grid-viewport",
                                        store: new UserStore(),
                                        tbar: [
                                                {
                                                        text: "Open Grid Dialog",
                                                        handler: function (){
                                                                if (!win){
                                                                        win = Ext.create("Ext.window.Window", {
                                                                                title: "Dialog",
                                                                                layout: "fit",
                                                                                width: 500,
                                                                                height: 400,
                                                                                closeAction: "hide",
                                                                                items: [
                                                                                        {
                                                                                                xtype: "grid-dialog",
                                                                                                store: new UserStore()
                                                                                        }
                                                                                ]
                                                                        });
                                                                }
                                                                win.show();
                                                        }
                                                }
                                        ]
                                }
                        ]
                });     
                
        });

DUMMY FIX: No problem without itemId definition in columns

Code:

...
getCols: function (){
        var items = new Ext.util.MixedCollection(false, function (item){
                return item.dataIndex;
        });
        
        items.add({
                dataIndex: "id",
                header: "id"
        });
        
        items.add({
                dataIndex: "firstName",
                header: "firstName"
        });
        
        items.add({
                dataIndex: "lastName",
                header: "lastName"
        });
        
        items.add({
                dataIndex: "age",
                header: "age"
        });
        
        items.add({
                dataIndex: "eyeColor",
                header: "eyeColor"
        });
        return items;
}
...

@SENCHA DEVELOPMENT

I am looking forward to a real solution