How to center items in Ext.Toolbar

[cbb]

Hi,
Items in toolbar are left by default, use '->' can make them right, but how to make them center?
My English is so poor. May I had expressed my trouble.

[karieanis]

You need to get the toolbar object and wrap a center tag around it. I would suggest putting this code in 'render' listener for your toolbar object.

eg.

var myToolbar = new Ext.Toolbar(
{
  //config options
  listeners:
  {
    'render':function(t)
    {
       t.getEl().child("table").wrap({tag:'center'});
    }
  }
});

[cbb]

Hoo, it works very well.
Thanks!

[Animal]

Yep, that will work fine.

Just a heads up that in 3.0, it won't work as well.

A 3.0 Toolbar has two tables. One for left aligned Buttons and one for right aligned Buttons.

Also, a 3.0 Toolbar is a Container, and so will not contain the expected internal DOM structure until it's first layout operation.

So in 3.0:

myToolbar.on('afterlayout', function(tb){
	tb.el.child('.x-toolbar-right').remove();
	var t = tb.el.child('.x-toolbar-left');
	t.removeClass('x-toolbar-left');
	t = tb.el.child('.x-toolbar-ct');
	t.setStyle('width', 'auto');
	t.wrap({tag: 'center'});
}, null, {single: true});

[phpkunst]

Hi,
Yes it works for extjs 3.0 but where is the paging info. Remove is'nt an option for me.
How can i make a fix for it.

[rjackson64840]

Thanks for the workaround Animal. Any chance you guys have plans to simplify this via the toolbar config so that buttons can more easily be centered (which is a very common requirement)?

[grandanat]

Hi,
I want to display in a tollbar a lef button a right button and a label in the middle. So i don't wanna remove left and right tool bars, but just to add another one between them, center aligned.
Or, maybe to simply add a label to left toolbar and align it right ?
What's the best solution ?
Thanks

[grandanat]

A workaround would be to add a spacer between left button and title with width =toolbar width/2 but i'm not able to obtain toolbar width(maybe even is not defined until first layout render) . So what can i do ?

[yuva_ess]

How this can be done in 4.0?