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

Share Improve this question Follow asked Mar 6, 2012 at 21:40 Fábio Gusmão RibeiroFábio Gusmão Ribeiro 12711 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.