hyperlink

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 4: Make Links Show They Have Focus

It drives me crazy in Ext JS that if you tab through a form and happen to have a link (anchor tag) you can’t tell when focus is on the link. I finally spent some time working out the css changes needed. Not being a css expert, this can be daunting at first, but it wasn’t too bad. My link always shows with a text underline. I put a color on the link and then changed the color when the link gets focus.

a.myclass-link {
	color: #2b547d
}

a.myclass:focus {
    color: #6699ff;
    outline: 0
}

for a link created like so:

				{
					xtype: 'component',
					itemId: 'myLink',
					autoEl: {
						tag: 'a',
						href: '#',
						cls: 'myclass',
						html: 'Put a link here',
						style: 'padding-top: 3px;',
						tabindex: 10
					},
					listeners: {
						scope: this,
						render: function(c){
							c.getEl().on('click', this.onMyLinkClick, this, {stopEvent: true});
						}
					}
				},

Ext JS – Putting a link in a FormPanel

I wanted to put a link in a FormPanel. I found some helpful posts in the forum and here it is in a nutshell (thanks to Condor’s postings). The idea is creating a BoxComponent with an href element. During render, attach a listener to the href for the click event. Watch out for scope!

{
    itemId: 'resestLink',
    xtype: 'box',
    autoEl: {
        tag: 'a',
        href: '#',
        html: 'Reset Criteria'
    },
    listeners: {
        scope: this,
        render: function(c){
            c.getEl().on('click', this.onResetClick, this, {stopEvent: true});
        }
    }
}

Link to related posting on Ext JS forums:
Add hyperlink in FormPanel