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

Я хотел бы знать, как добавить метод onClick() в компонент Ext.form.Text.Как добавить метод onClick в TextField (ExtJS Framework)?

Если компонент кнопка, то все, что нужно сделать, это добавить следующую строку:

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! 

    }] 
});

источник

2012-02-09 Rox

Это может помочь [http://stackoverflow.com/questions/ 7260134/extjs-4-event-handling-tutorial/7261836 # 7261836] (http://stackoverflow.com/questions/7260134/extjs-4-event-handling-tutorial/7261836#7261836) –

Обработчик - это ярлык для прослушивателя действий по умолчанию. Для кнопки это, очевидно, щелчок, но текстовое поле не имеет действия по умолчанию. Кроме того, текстовое поле фактически не срабатывает событие щелчка, но вы всегда можете добавить обработчик событий к элементу йота:

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

источник

2012-02-09 09:02:01 Krzysztof

Спасибо! Можно ли объявить слушателя вне объявления кнопки и вызвать его с помощью метода on()? – Rox

Это, но вы должны проверить, если оно отображается (вы можете добавить слушателя только в текстовое поле). Кроме того, вы можете расширить текстовое поле. Вот пример: http://jsfiddle.net/3ZZcZ/1/ – Krzysztof

Это событие будет запущено даже при нажатии на метку поля. Если вы хотите, чтобы событие было запущено только при нажатии на фактическое поле, введите элемент ввода следующим образом: 'var inputElement = this.getEl(). Down ('input')' и привязать событие 'mousedown' к этому. Будьте осторожны, чтобы не использовать событие 'click', потому что оно может быть запущено на входе даже при нажатии метки поля. – MarthyM

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! 

    }] 
});

источник

2013-12-12 09:52:23 KBIIX

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

ответ

Смежные вопросы