css

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});
						}
					}
				},