Как добавить метод onClick в TextField (ExtJS Framework)? - PullRequest
Новая
       18

Как добавить метод onClick в TextField (ExtJS Framework)?

2 голосов
/ 09 февраля 2012

Я хотел бы знать, как добавить метод 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!

    }]
});

Ответы [ 2 ]

10 голосов
/ 09 февраля 2012

Обработчик - это ярлык для прослушивателя действий по умолчанию. Для кнопки это, очевидно, щелчок, но текстовое поле не имеет действия по умолчанию. Кроме того, текстовое поле фактически не запускает событие 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")
                });
            }
        }
    }]
});
2 голосов
/ 12 декабря 2013 
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!

    }]
});
...