View Full Version : centered column of buttons

5 Jun 2009, 10:09 AM
Hi - simple newbie question for y'all.

I want to create a simple centered column of buttons.

I've declared this as follows:

var myButtonContainer = new Ext.Container({
layout: 'ux.row',
style: 'padding: 2px;',
height: 200,
items: [button1, button2, button3]

... and the buttons like so:

var button1= new Ext.Button({
text: "Cancel",
style: 'padding: 5px;',
rowHeight: .25

The buttons are aligned left. What's the best way to make them aligned center?


- Michael

EDIT: I found a solution, not sure if this is the "ext-js way":

Added the following to each of the button "style" properties:

margin-left: auto; margin-right: auto;

5 Jun 2009, 10:25 AM
You can put them in the buttons or fbar configuration and use the config buttonAlign: 'center'.

5 Jun 2009, 10:39 AM
Thanks - is this what you mean?

var criteriaButtonContainer = new Ext.Panel({
layout: 'ux.row',
style: 'padding: 2px;',
height: 200,
columnWidth: .25,
buttonAlign: 'center',
buttons: [button1, button2, button3]

I tried it but it didn't work for me. Maybe that's because I had to convert my Container to a Panel to get the "buttons" config option, and buttons in a Panel go in the footer? In my case I don't see them at all.