I'm trying to create my own LinkButton ponent in Ext JS 4. Nothing new, right?

My code looks like this:

Ext.define('LinkButton', {
    extend: 'Ext.Component',
    xtype: 'linkbutton',
    autoEl: 'a',
    renderTpl: '<a href=\"javascript:;\">{text}</a>',
    config: {
        text: '',
        handler: function () { }
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            text: this.getText()
        };

        var handler = me.getHandler();
        if (handler) {
            me.on('click', handler);
        }
    }
});

So far so good! My LinkButton does look like a hyperlink anad my text content is in there. Graceful.

However, I can't get my ponent to fire an event when I click on it!

This particular line me.on('click', handler); is not working! Even if I change it from on to addListener it has no effect.

So question is: How do I add DOM events to my ponent? Or, even better, how do I access my own ponent's DOM element? I haven't been able to do any of that!

Thanks!

I'm trying to create my own LinkButton ponent in Ext JS 4. Nothing new, right?

My code looks like this:

Ext.define('LinkButton', {
    extend: 'Ext.Component',
    xtype: 'linkbutton',
    autoEl: 'a',
    renderTpl: '<a href=\"javascript:;\">{text}</a>',
    config: {
        text: '',
        handler: function () { }
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            text: this.getText()
        };

        var handler = me.getHandler();
        if (handler) {
            me.on('click', handler);
        }
    }
});

So far so good! My LinkButton does look like a hyperlink anad my text content is in there. Graceful.

However, I can't get my ponent to fire an event when I click on it!

This particular line me.on('click', handler); is not working! Even if I change it from on to addListener it has no effect.

So question is: How do I add DOM events to my ponent? Or, even better, how do I access my own ponent's DOM element? I haven't been able to do any of that!

Thanks!

• javascript
• html
• extjs
• ponents
• extjs4

3 Answers 3

Or you can do this

afterRender : function() {
    this.callParent(arguments);

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

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

    var handler = this.getHandler();
    if (handler) {
        handler();
    }
}

Here is my proposition, which is basing on source from Button ponent:

Ext.define('LinkButton', {
    extend: 'Ext.Component',
    xtype: 'linkbutton',
    autoEl: 'a',
    renderTpl: '<a href=\"javascript:;\" id="{id}-btnEl">{text}</a>',
    config: {
        text: '',
        handler: function () { }
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            text: this.getText()
        };
    },
    onRender: function(ct, position) {
        var me = this, 
            btn;

        me.addChildEls('btnEl');

        me.callParent(arguments);

        btn = me.btnEl;

        me.mon(btn, 'click', me.onClick, me);
    },
    onClick: function(e) {
        var me = this;
        if (me.preventDefault || (me.disabled && me.getHref()) && e) {
            e.preventDefault();
        }
        if (e.button !== 0) {
            return;
        }
        if (!me.disabled) {
            me.fireHandler(e);
        }
    },
    fireHandler: function(e){
        var me = this,
            handler = me.handler;

        me.fireEvent('click', me, e);
        if (handler) {
            handler.call(me.scope || me, me, e);
        }
    }
});

Working sample: http://jsfiddle/lolo/AEwH4/1/

the right way is to use Ext.view.View for such tasks. There is custom html that allow you to do anything, and in same time all the functionality of Ext.Component is available.