Ext.toolbar.Toolbar Wrong top-offset with hidden child items

[bej]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.2

Browser versions tested against:

• Chrome Version 22
• Firefox Version 15.0.1

DOCTYPE tested against:

• HTML 5

Description:

• Ext.toolbar.Toolbar - the toolbars top-offset has a wrong value if the toolbars items are hidden

Steps to reproduce the problem:

• create a toolbar with a hidden item

The result that was expected:

• the toolbar is completely visible

The result that occurs instead:

• the toolbars bottom border is not visible (wrong top-offset)

Test Case:

Ext.create('Ext.container.Container', {
layout : {
type : 'hbox',
align : 'stretch'
},

items : [
// this panel will be rendered with an empty bottom-toolbar.
{
xtype : 'panel',
title : 'Title',
html : 'panel content',
bbar : []
},
// this panel will be rendered with bottom-toolbar containing 
// a hidden button with a top-offset increased by the toolbars height.
{
xtype : 'panel',
title : 'Title',
html : 'panel content',
bbar : [{text : 'click', hidden: true}]
}
],

renderTo: Ext.getBody()
});​

HELPFUL INFORMATION
Screenshot or Video:

• attached

See this URL for live test case: http://jsfiddle.net/3JKCU/9/

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Win 7

[evant]

If you want to enforce a height, use the height config:

Ext.onReady(function() {
    Ext.create('Ext.container.Container', {
        layout: {
            type: 'hbox',
            align: 'stretch'
        },

        items: [{
            xtype: 'panel',
            title: 'Title',
            html: 'panel content',
            bbar: {
                height: 22
            }
        }, {
            xtype: 'panel',
            title: 'Title',
            html: 'panel content',
            bbar: {
                height: 22,
                items: [{
                    text: 'click',
                    hidden: true
                }]
            }
        }],
        renderTo: Ext.getBody()
    });
});

[bej]

well, then there is still no bottom border visible ...

[evant]

Could well be your custom CSS, what happens if you run it with ext-all.css?