Question

我想知道如何将onClick（）方法添加到Ext.form.Text组件。

如果组件是按钮，那么我所要做的就是添加以下行：

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

但是如果组件是文本字段，则该行不起作用。请看下面的例子：

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!

    }]
});

Answer 1

Handler是默认动作侦听器的快捷方式。对于按钮，这显然是单击，但文本字段没有默认操作。此外，文本字段实际上不会触发click事件，但您始终可以向dom元素添加事件处理程序：

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")
                });
            }
        }
    }]
});

Answer 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!

    }]
});

如何将onClick方法添加到TextField（ExtJS框架）？

2 个答案: