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.