[4.1.*] Inconsistent layouts with docked items.

[plleeuwm]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.*

Description:

• Panels with docked items lay out inconsistently depending if they have heights set or not.

Test Case:

Ext.onReady(function() {    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    var createGrid = function(height) {
        return Ext.create('Ext.grid.Panel', {
            title: 'Simpsons with a height of : ' + height,
            height: height,
            store: store,
            dockedItems: Ext.create('Ext.grid.Panel', {
                scroll: false,
                store: store,
                dock: 'right',
                columns: [{
                    width: 100,
                    header: 'Name',
                    dataIndex: 'name'
                }]
            }),
            columns: [{
                header: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            renderTo: Ext.getBody()
        });
    };
    
    
    var height = createGrid(150), noHeight = createGrid();
});

Here is a screenshot of the code being run :

Ext.Panel.jpg

[MichaelOstrovsky]

I found a temporary workaround - just set docked item's height manually after it's rendered.
for example, here's a patch to fix panel/window header which height has been set directly in css :

/**
 * Correct header sizing
 */
Ext.define('patches.PanelHeader', {
    override: 'Ext.panel.Panel',
    updateHeader: function(){
        this.callParent(arguments);


        if(this.header){
            this.header.on('render', function(header){
                header.setHeight(header.getHeight());
            }, this);
        }


    }
});