PDA

View Full Version : [4.0.2a] Wrong layout of nested panels with docked items



doublep
27 Jun 2011, 4:33 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.2a


Browser versions tested against:

Firefox 4.0.1
Google Chrome 12.0


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 as well. I guess that one is simpler to debug.


Steps to reproduce the problem:

Run the attached 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 the second panel too.


The result that occurs instead:

Bottom toolbar is not visible.


Test Case:



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 });




HELPFUL INFORMATION


Operating System:

Linux (likely not relevant)

doublep
28 Jun 2011, 10:12 PM
Ping... I know that overnesting panels is frowned upon, but originally we have a panel with border layout, you cannot do without nesting in this case.