PDA

View Full Version : Ext link button?



xun
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.

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

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
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.

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

la_ka
23 Oct 2012, 12:28 PM
:)):))