Skip to content

Instantly share code, notes, and snippets.


Pencroff/Example of using

Last active Dec 24, 2015
What would you like to do?
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:visited {
a.x-linkbutton-default:hover {
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.superclass.initComponent.apply(me, arguments);
afterRender: function () {
'use strict';
var me = this;
me.mon(me.getEl(), 'click', me.handler, me, {stopEvent: me.stopEvent});
setParams: function (params) {
'use strict';
var me = this,
el = me.getEl(),
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);

This comment has been minimized.

Copy link

@chrisbjohannsen chrisbjohannsen commented Mar 17, 2015

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
You can’t perform that action at this time.