View Full Version : Ext link button?

9 Mar 2012, 1:19 PM
hi, is it possible to have a button that essentially just a html link with all the events, but none of of button rendering?

<a href="javascript:void(0);" onclick="this.blur(); return false;" class="{cls}"{tabindex}><span>{text}</span></a>

Currently we made a custom component (in ext 3) that we basically add various event to the above html string, which i think is overkill.

But the ext button right now will always give you a tone of button classes (for example:
class="css3-button primary css3-button-default-small x-noicon css3-button-noicon css3-button-default-small-noicon"), which made it very hard to style, especially we are trying to migrate. I do not want to have to restyle all of my css elements.

9 Mar 2012, 2:17 PM
Just typing off the top of my head:

Ext.define('Ux.LinkButton', {
extend : 'Ext.Component',
xtype : 'linkbutton',

text : null,
handler : Ext.emptyFn,

initComponent : function() {
var me = this;

me.html = '<a>' + me.text + '</a>';


afterRender : function() {
var me = this;


me.mon(me.el, {
scope : me,
delegate : 'a',
click : me.handleClick

handleClick : function(e) {

this.handler.call(this, this);

setText : function(text) {
this.update('<a>' + text + '</a>');

new Ux.LinkButton({
renderTo : document.body,
text : 'Test',
handler : function(btn) {

9 Mar 2012, 2:22 PM
this is essentially what we are doing. But I thought there was a better way in ext 4. So for anything that is a bit of customized, we have to resort to the old Component.

9 Mar 2012, 2:27 PM
You can change the renderTpl but I find this is the easiest.

23 Oct 2012, 12:28 PM