Ext JS Buttons in a FormPanel, not the button bars

I put buttons inside a FormPanel, but not inside the top or button toolbar, but instead as an item on the form. I actually did this on two different forms, two different ways. For both, I wanted the buttons be in the field portion of the FormLayout, but to have no field label.

Button and a link

I used a Container to house the button and the link.

{
	xtype: 'container',
	fieldLabel: ' ',
	labelSeparator: '',
	anchor: '-50',
	layout: 'hbox',
	layoutConf : {
		pack: 'start'
	},
	items: 
	[
		{
			xtype: 'button',
			text: 'Send',
			width: 100,
			scope: this,
			handler: this.handleSend
		},
		{
			itemId: 'resestLink',
			xtype: 'box',
			autoEl: {
				tag: 'a',
				href: '#',
				html: 'Reset Fields',
				style: 'padding-top: 5px; padding-right: 10px; padding-left: 10px'
			},
			listeners: {
				scope: this,
				render: function(c){
					c.getEl().on('click', this.onResetClick, this, {stopEvent: true});
				}
			}
		}
	]
}

Two buttons

I used a ButtonGroup to house the buttons.  The tricky part was getting the buttons spaced as I wanted them, and what I came up with is okay, but could probably be improved with a little more time.

{
	xtype: 'buttongroup',
	fieldLabel: ' ',
	labelSeparator: '',
	frame: false,
	defaults : {
		width: 90 // ended up being the width of the buttons
	},
	width: 200, // is the width of the table (table layout is the default for ButtonGroup)
	items: 
	[
		{
			xtype: 'button',
			text: 'Find By User',
			scope: this,
			handler: this.handleFind
		},
		{
			xtype: 'button',
			text: 'Find All',
			scope: this,
			handler: this.handleFindAll
		}
	]
}
Advertisements

One comment

  1. Hi,

    I just found another way to space buttons using the spacer.

    {
    xtype : ‘button’,

    },
    {
    xtype : ‘spacer’,
    width : 5
    },
    {

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s