button

Ext JS 4: Another LinkButton

Previously, I needed a link in my application that was used in many places and always handled the same way. I did that by using a button styled as a link and then handling the events by delegating clicks on objects with a specific css class to one handler (“Link” from One Tab to Another).

In a new application I am working on, I want the same kind of link, but with different handlers for each link. Plus, I only need four of them. Enter the “link button”. I searched around but didn’t find anything exactly like I wanted. So, I created my own.

Here is a screenshot. The links are really buttons, styled in a similar manner as my previous post.

Screenshot using a LinkButton

The code is on github at gist: 3277219

Here is the CSS and the JavaScript. One thing to note about the css. The font-size style is in there for IE7 browsers, since the font:inherit does not work in IE 7. Mine is set to x-large b/c that is what I needed.

Here is a config, using the LinkButton. It is just a snippet, but it shows the last row from the screenshot:

{
	xtype: 'fieldcontainer',
	layout: {
		type: 'hbox',
		align: 'middle'
	},
	defaults: {
		style: {fontSize: 'large'}
	},
	items: [
		{
			itemId: 'linkNo4',
			xtype: 'linkbutton',
			width: 70,
			style: {
				fontSize: 'x-large',
				textAlign: 'right'
			}
		},
		{
			xtype: 'label',
			text: 'This screenshot is from Chrome',
			flex: 1,
			margin: '0 0 0 15'
		}
	]
}

Some helpful/related links:

Version Info: Ext JS 4.1
Tested (at least a little bit) on Chrome 21, Firefox 14.0.1, IE6, IE7, IE8.

Advertisements

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
		}
	]
}