Wie fügen Sie einen onClick-Methode auf ein TextField (ExtJS Framework)?

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

Wenn die Komponente eine Schaltfläche ist, dann alles, was ich tun müssen, ist fügen Sie diese Zeile:

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

Aber, dass die Zeile nicht funktioniert, wenn die Komponente in ein textfield. Schauen Sie sich das Beispiel unten an:

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!

    }]
});
Dies könnte helfen, http://stackoverflow.com/questions/7260134/extjs-4-event-handling-tutorial/7261836#7261836

InformationsquelleAutor Rox | 2012-02-09

  1. 10

    Handler ist eine Abkürzung für die default-action-listener. Für einen button ist dies natürlich auf, aber ein text Feld nicht über eine Standard-Aktion. Zusätzlich wird ein Textfeld nicht eigentlich Feuer mit einem click-Ereignis, aber Sie können immer fügen Sie einen Ereignishandler für das 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")
                });
            }
        }
    }]
});
    Danke! Ist es möglich zu erklären, dass die Hörer außerhalb der Schaltfläche Erklärung und rufen Sie es mit der on () - Methode?
    Es ist, aber Sie müssen überprüfen, ob es gemacht wird (Sie können hinzufügen Zuhörer nur auf den gerenderten text-Feld). Alternativ können Sie verlängern Textfeld. Hier ist ein Beispiel: jsfiddle.net/3ZZcZ/1
    Dieses Ereignis wird ausgelöst, selbst wenn ein Klick auf die Feldbezeichnung. Wenn Sie möchten, dass das Ereignis nur ausgelöst, wenn Sie auf das eigentliche Feld, Holen Sie sich das input-element so: var inputElement = this.getEl().down( 'input' ) und binden die mousedown Veranstaltung. Seien Sie vorsichtig, nicht zu verwenden click Ereignis, da es ausgelöst werden kann auf die Eingabe, auch wenn Sie auf die Schaltfläche " Formularfeld-Beschriftung.
    Diese Lösung funktioniert perfekt für mich. Danke !

    InformationsquelleAutor Krzysztof

  2. 2
    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!

    }]
});

    InformationsquelleAutor KBIIX

Schreibe einen Kommentar