How add a onClick method to a TextField (ExtJS Framework)?

Question

I would like to know how to add an onClick() method to a Ext.form.Text component.

If the component is a button, then all I have to do is to add this line:

handler: function() {alert("Hello!");}

But that line doesn´t work if the component is a textfield. Look at the example below:

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        id: 'myButton',
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        style: 'background-color: #ddd;',
        allowBlank: false,
        handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Does not work!
    }, {
        xtype: 'button',
        name: 'email',
        fieldLabel: 'Email Address',
        style: 'background-color: green',
        textfieldStyle: 'background-color: green',
        handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!

    }]
});

This might help [http://stackoverflow.com/questions/7260134/extjs-4-event-handling-tutorial/7261836#7261836](http://stackoverflow.com/questions/7260134/extjs-4-event-handling-tutorial/7261836#7261836) — Molecular Man, Feb 09 '12 at 07:38

score 12 · Accepted Answer · edited Mar 24 '17 at 13:15

12

Handler is a shortcut for the default action listener. For a button this is obviously click, but a text field doesn't have a default action. In addition, a text field does not actually fire a click event, but you can always add an event handler to the dom element:

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        id: 'myButton',
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        style: 'background-color: #ddd;',
        allowBlank: false,
        listeners: {
            render: function() {
                this.getEl().on('mousedown', function(e, t, eOpts) {
                    Ext.getCmp('myButton').setValue("TEXT")
                });
            }
        }
    }]
});

edited Mar 24 '17 at 13:15

Lorenz Meyer

19,166
22
75
121

answered Feb 09 '12 at 09:02

Krzysztof

15,900
2
46
76

Thanks! Is it possible to declare the listener outside the button declaration and call it with the on() method? – Rox Feb 09 '12 at 09:25
1

It is, but you must check if it is rendered (you can add listener only on rendered text field). Alternatively you can extend text field. Here is example: http://jsfiddle.net/3ZZcZ/1/ – Krzysztof Feb 09 '12 at 09:39
This event will be fired even when clicking on field label. If you want the event to be fired only when clicking on the actual field, get the input element like so: `var inputElement = this.getEl().down( 'input' )` and bind the `mousedown` event to that. Be careful not to use `click` event, because it can be fired on the input even when clicking the field label. – MarthyM Oct 13 '16 at 10:11
Thanks!, I needed a solucion like this for a touchable screen. The textfield shows keyboard when clicked on it (or label) but not when it gets the focus, as it can get the focus programatically without needing the keyboard. – Nils Mar 10 '23 at 14:03

score 2 · Answer 2 · answered Dec 12 '13 at 09:52

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        id: 'myButton',
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        style: 'background-color: #ddd;',
        allowBlank: false,
        listeners: {
            render: function( component ) {
                component.getEl().on('click', function( event, el ) {
                    component.setValue("TEXT");
                });
            }
        }
    }, {
        xtype: 'button',
        name: 'email',
        fieldLabel: 'Email Address',
        style: 'background-color: green',
        textfieldStyle: 'background-color: green',
        handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!

    }]
});

How add a onClick method to a TextField (ExtJS Framework)?

2 Answers2