Skip to content

Instantly share code, notes, and snippets.

@Pencroff
Last active December 24, 2015 21:49
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pencroff/6868891 to your computer and use it in GitHub Desktop.
Save Pencroff/6868891 to your computer and use it in GitHub Desktop.
My implementation of LinkButton for ExtJS. It can be used as a link directly (set 'stopEvent' to false) or as a button (use subscription to 'click' event)
xtype: 'linkbutton',
style: 'font-size: 18px; font-weight: bold',
//stopEvent: false, // if you need direct link
title: 'Go to Some Link',
path: '#job/view',
text : 'Some link'
/*
if you need some extra params in link after render LinkButton you can use
some code like this one:
*/
var linkbtn = view.down('linkbutton');
linkbtn.setParams({id: 'new id'});
/*
You will get link like #job/view?id=new id
*/
a.x-linkbutton-default,
a.x-linkbutton-default:visited {
color:#00A;
}
a.x-linkbutton-default:hover {
text-decoration:underline;
}
Ext.define('Ext.ux.LinkButton', {
extend: 'Ext.Component',
alias: 'widget.linkbutton',
baseCls: Ext.baseCSSPrefix + 'linkbutton',
autoEl: {
tag: 'a',
href: this.path,
title: this.title
},
renderTpl: '{text}',
path: '#',
title: null,
defaultParams: {},
stopEvent: true,
initComponent: function () {
'use strict';
var me = this;
me.renderData = {
text: me.text
};
me.addEvents('click');
me.superclass.initComponent.apply(me, arguments);
},
afterRender: function () {
'use strict';
var me = this;
me.mon(me.getEl(), 'click', me.handler, me, {stopEvent: me.stopEvent});
me.setParams();
},
setParams: function (params) {
'use strict';
var me = this,
el = me.getEl(),
p,
prop,
path;
p = Ext.clone(me.defaultParams);
if (params) {
p = Ext.merge(p, params);
}
path = me.path + '?';
for (prop in p) {
if (p.hasOwnProperty(prop)) {
path += prop + '=' + p[prop] + '&';
}
}
path = path.substring(0, path.length - 1);
if (el && el.dom) {
el.dom.href = path;
el.dom.title = me.title;
}
},
handler: function (e, el, eOpts) {
'use strict';
var me = this;
me.fireEvent('click', me, e, eOpts);
}
});
@chrisbjohannsen
Copy link

Thanks for this, it was exactly what I needed

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