Ext link button?

[xun]

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.

[mitchellsimoens]

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>';

        me.callParent();
    },

    afterRender : function() {
        var me = this;

        me.callParent(arguments);

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

    handleClick : function(e) {
        e.stopEvent();

        this.handler.call(this, this);
    },

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

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

[xun]

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.

[mitchellsimoens]

You can change the renderTpl but I find this is the easiest.

[la_ka]