View Full Version : Alignment Help

5 Jan 2011, 8:22 AM
Hi All,

I have a pop-up window box with a text entry field and two buttons below it (see screenshot (http://www.clay-communications.com/jamie/screen.jpg)). It's okay the way it is, but I'm anal enough that I'd like the 'Cancel' button to align with the left edge of the input box and the 'Accept' button to align with the right edge of the box. How can I accomplish this?

Here is the code I'm currently using to get these results:

var cancelButton = new Ext.Button({
width: '100',

var acceptButton = new Ext.Button({
width: '100',

var spacer = ({
flex: 1,
xtype: 'component'

var buttons = new Ext.Panel({
layout: 'hbox',
items: [cancelButton, spacer, acceptButton]

var listName = ({
xtype: 'textfield',
placeHolder: 'Name the List',
name: 'listname'

var overlayTb = new Ext.Toolbar({
dock: 'top',

var overlay = new Ext.form.FormPanel({
floating: true,
modal: true,
padding: '5',
width: 350,
height: 195,
items: [listName, buttons],
dockedItems: overlayTb,