View Full Version : Right align buttons in a toolbar docked to the left (lbar)

2 May 2013, 7:54 AM
I'm defining dockedItems docked to the left for a panel and would like to be able to make sure the buttons are aligned to the right. While this is usually not necessary since the buttons fit perfectly in the available space, if I set the width of the toolbar to something bigger then the buttons stay to the left. Here's the code:

this.dockedItems = {
xtype: 'toolbar',
dock : 'left',
width: 150,
items: [...buttons go here...]

I've tried buttonAlign, doesn't seem to work. Any search I do regarding alignment and bars seems to mention tbfill or "->", but all seem to deal with tbar or lbar. I tried using tbfill, but didn't get the expected result. Maybe I'm using it wrong? Any help is appreciated.

2 May 2013, 4:32 PM
Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
dockedItems: [{
xtype: 'toolbar',
dock : 'left',
width: 150,
layout: {
type: 'vbox',
align: 'right'
items: [{
text: 'Foo'
}, {
text: 'Bar'


2 May 2013, 5:08 PM
It really seems like that should work, and yet when I try it in my case, the 'right' value doesn't work as expected. 'left', 'center', and 'stretch' work, but 'right' keeps the buttons left aligned. Guess it might have something to do with the multiple nested layouts I have, guess I'll have to dig some more.

3 May 2013, 5:43 AM
Actually, I just plugged your exact code on a page and tried it and the buttons stay left aligned. So looks like it may have to do with the Ext version I'm running, I just tried 4.2 and that seems to work fine.