PDA

View Full Version : [NOREPRO] [4.0.6] Wrong layout of nested panels with docked items



enw
20 Sep 2011, 12:58 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.0.6

Browser versions tested against:

FF 6.0
Google Chrome 13.0.782.220

DOCTYPE tested against:

4.01 strict

Description:

Nested panels with docked items are layed out incorrectly in many cases. This seems to depend on the layout of the panel they are nested in. I noticed this with border layout (I have a panel with 'west' and 'center' regions), but further testing indicated it also happens with fit layout, for example.

Steps to reproduce the problem:

Run the code
Observe that the first panel with auto layout renders its child with both top and bottom toolbars, as expected.
Observe that the second panel with fit layout renders its child without bottom toolbar. Actually, FireBug suggest that bottom toolbar is there, but is rendered outside the visible part.

The result that was expected:

Bottom toolbar is visible in both panels.

The result that occurs instead:

Bottom toolbar is visible in the top panel but not in the bottom panel

Test Case:
Ext.onReady (function () {
Ext.widget ('panel',
{ title: 'Nested panel with auto layout',
items: [{ xtype: 'panel',
items: [{ html: 'Irrelevant text' }],
dockedItems: [{ xtype: 'toolbar',
dock: 'top',
items: [{ xtype: 'button', text: 'Top' }] },
{ xtype: 'toolbar',
dock: 'bottom',
items: [{ xtype: 'button', text: 'Bottom' }] }] }],
renderTo: document.body });

Ext.widget ('panel',
{ title: 'Nested panel with fit layout',
layout: 'fit',
height: 300,
items: [{ xtype: 'panel',
items: [{ html: 'Irrelevant text' }],
dockedItems: [{ xtype: 'toolbar',
dock: 'top',
items: [{ xtype: 'button', text: 'Top' }] },
{ xtype: 'toolbar',
dock: 'bottom',
items: [{ xtype: 'button', text: 'Bottom' }] }] }],
renderTo: document.body });
});