Skip to content

Instantly share code, notes, and snippets.

@aghuddleston
Created August 6, 2012 18:06
Show Gist options
  • Save aghuddleston/3277219 to your computer and use it in GitHub Desktop.
Save aghuddleston/3277219 to your computer and use it in GitHub Desktop.
An Ext JS 4.1 link button. It is a button, styled as a link.
button.linkButton {
overflow:visible; /* Shrinkwrap the text in IE7- */
margin:0;
padding:0;
border:0;
color: #2B547D;
background:transparent;
font:inherit !important; /* Inherit font settings (doesn’t work in IE7-) */
line-height:normal; /* Override line-height to avoid spacing issues */
text-decoration:underline; /* Make it look linky */
cursor:pointer; /* Buttons don’t make the cursor change in all browsers */
-moz-user-select:text; /* Make button text selectable in Gecko */
}
/* Remove mystery padding in Gecko browsers.
* See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
*/
button.linkButton::-moz-focus-inner {
padding:0;
border:0;
}
Ext.define('LinkButton', {
extend:'Ext.Component',
alias:'widget.linkbutton',
childEls:[
'btnEl'
],
renderTpl:['<button id="{id}-btnEl" type="button" class="linkButton"',
'<tpl if="fontSize"> style="font-size:{fontSize}"</tpl>',
'<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl>',
'>{text}</button>'
],
/**
* @cfg {String} text
* The text to be used as innerHTML.
*/
/**
* @cfg {Number} tabIndex
* Set a DOM tabIndex for this button.
*/
/**
* @cfg {String} fontSize
* Sets the font-size on the button. Must be in a valid format like "11px". Really
* only needed if supporting IE7.
*/
config:{
handler:function () {
}
},
initComponent:function () {
var me = this;
me.callParent(arguments);
},
beforeRender:function () {
var me = this;
Ext.applyIf(me.renderData, {
text:me.text || '',
tabIndex: me.tabIndex,
fontSize: me.fontSize
});
},
onRender:function (ct, position) {
var me = this,
btn;
me.callParent(arguments);
btn = me.btnEl;
me.mon(btn, 'click', me.onClick, me);
},
onClick:function (e) {
var me = this;
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
e.preventDefault();
}
if (e.button !== 0) {
return;
}
if (!me.disabled) {
me.fireHandler(e);
}
},
fireHandler:function (e) {
var me = this,
handler = me.handler;
me.fireEvent('click', me, e);
if (handler) {
handler.call(me.scope || me, me, e);
}
},
setText:function (text) {
var me = this;
me.text = text;
if (me.rendered) {
me.btnEl.update(text || '');
me.updateLayout();
}
}
});
@aghuddleston
Copy link
Author

Added tabIndex and fontSize to the config options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment