Wie füge ich eine onClick-Methode zu einem TextField (ExtJS Framework) hinzu?

Question

Ich würde gerne wissen, wie man einer Ext.form.Text-Komponente eine onClick()-Methode hinzufügt.

Wenn die Komponente ein Button ist, dann muss ich nur diese Zeile hinzufügen:

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

Aber diese Zeile funktioniert nicht, wenn die Komponente ein Textfeld ist. Schauen Sie sich das folgende Beispiel an:

Ext.create('Ext.form.Panel', {
    title: 'Kontaktinfo',
    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")} // Funktioniert nicht!
    }, {
        xtype: 'button',
        name: 'email',
        fieldLabel: 'E-Mail-Adresse',
        style: 'background-color: green',
        textfieldStyle: 'background-color: green',
        handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Funktioniert!

    }]
});

Answer 1

Handler ist eine Abkürzung für den Standard-Action-Listener. Bei einem Knopf ist dies offensichtlich ein Klick, aber ein Textfeld hat keine Standardaktion. Darüber hinaus löst ein Textfeld tatsächlich kein Klickevent aus, aber Sie können immer einen Ereignishandler zum DOM-Element hinzufügen:

Ext.create('Ext.form.Panel', {
    title: 'Kontaktinformationen',
    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")
                });
            }
        }
    }]
});

Answer 2

Ext.create('Ext.form.Panel', {
    title: 'Kontaktinformationen',
    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: 'E-Mail-Adresse',
        style: 'background-color: green',
        textfieldStyle: 'background-color: green',
        handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Funktioniert!

    }]
});