View Full Version : Panel wihout fixed size cuts off its own Toolbar

12 Aug 2011, 5:16 AM
(Posted this thread already in the Forum "Ext JS Community Forums 4.x / Ext: Discussion" before i bought support. You could delete that one of you want to (http://www.sencha.com/forum/showthread.php?143636-Panel-wihout-fixed-size-cuts-off-its-own-Toolbar))

I have a panel inside a floating html element ( eg <div id="content" style="float:left" /> ) that has no fixed size (size to its content) and this panel has a toolbar with several buttons. The problem is that this toolbar is cut off if the size of the panels content is not as big as the toobars with is.

The funny thing is that the panel has the same size as the toolbar inside a afterrender-listener on the toolbar but not afterrender of the container-panel. That leads me to the assumption that the panel sizes itself after all children are rendered (including the toolbar) and then ignores the toolbars size and just takes care of the bodys size.

Is there a way to tell the panel to fit to its whole content (includeing toobars)?

<div id="content" style="float:left"></div>

Ext.create('Ext.panel.Panel', {
renderTo: 'content',
listeners: {
afterrender: function () {
console.log("PanelWidth after PanelRendering: " + this.getWidth());
html: "test",
tbar: Ext.create('Ext.toolbar.Toolbar', {
layout: 'table',
listeners: {
afterrender: function () {
console.log("ToolbarWidth: " + this.getWidth());
console.log("PanelWidth after ToolbarRendering: " + this.ownerCt.getWidth());
text: 'button 1'
text: 'button 2'
text: 'button 3'
text: 'button 4'

firebug console output:

ToolbarWidth: 232
PanelWidth after ToolbarRendering: 232
PanelWidth after PanelRendering: 27

for the rendered panel see attached image

13 Aug 2011, 6:53 AM
Hmm, webkit browsers (Safari and Chrome) show it properly, also console output is correct. Other browsers (Firefox, Opera and IE9) behave as you describe.

I'm prone to believe it is a bug. Do you want this thread to be moved to Bugs?

14 Aug 2011, 10:57 PM
Yes please, that would be great.