View Full Version : Width problem with ButtonGroup in Toolbar

12 Nov 2010, 3:51 PM
I have the following code

<div id="testdiv2"></div>
var tlbTools = new Ext.Toolbar({
width: 400,
id: 'tlbTools',
var groupOptions = new Ext.ButtonGroup({
xtype: 'buttongroup',
id: 'groupOptions',
columns: 1,
layout: 'table',
var btnAccept = new Ext.Button({
xtype: 'button',
text: 'testme',
id: 'btnAccept',
tooltip: 'i am a tooltip',
scale: 'small',


The problem is that the width of the ButtonGroup is 6px even if i set the width to a specific width.

Note: If i replace ButtonGroup with Panel, everything works smoothly, but i don t want a Panel. Can you help me, what i m doing wrong? (it's strange because ButtonGroup is just an extension of the Panel class)

I would like to use the add methods of the Components because my code is automatically generated from php, and it's easier like that.

Is there anything that i m missing? Thank you in advance.

12 Nov 2010, 4:32 PM
I put the code above in an

Ext.onReady( function() {
// ... the code here

and the problem was solved.

It seems that for a strange reason, if i m using a Panel the widths are calculated nicely, but if i m using a ButtonGroup (which is almost the same) inside a Toolbar, the widths are not yet calculated correctly and that's why i have to wait for the page to load first.