OnClickメソッドをTextField（ExtJS Framework）に追加する方法はありますか？

Question

私は、OnClick（）メソッドをExt.form.Textコンポーネントに追加する方法を知りたいと思います。コンポーネントがテキストフィールドである場合

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

しかし、その行doesn't作品：コンポーネントがボタンの場合

は、その後、私がしなければならないすべては、この行を追加することです。以下の例を見てください：

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

ハンドラは、デフォルトのアクションリスナーのためのショートカットです。ボタンの場合、これは明らかにクリックですが、テキストフィールドにはデフォルトのアクションがありません。また、テキストフィールドには、実際にクリックイベントを発生しませんが、あなたは常に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! 

    }] 
});