javascript 如何在 ExtJS 4 表单中向所有字段（textField）添加 onChange 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12215426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a onChange method to all fields (textField) in a ExtJS 4 form
提问by user1638045
How can I add a change eventto all 'text fields' of a form inside of a window? First I create a window with a form. All fields are initialized with a value of 0. I would like to detect the user input (maybe with dirtychange), and if the is greater than 1 then change the background color of the textField.
如何向窗口内表单的所有“文本字段”添加更改事件？首先，我创建一个带有表单的窗口。所有字段都初始化为 0 值。我想检测用户输入（可能使用dirtychange），如果大于 1，则更改 textField 的背景颜色。
This is my code at the moment:
这是我目前的代码：
Ext.define('WPT.view.HoursPerMonthWindow', {
extend: 'Ext.window.Window',
alias : 'widget.hourspermonthwindow',
title : 'Hours per Months',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'january',
itemId: 'january',
fieldLabel: 'January'
},
{
xtype: 'textfield',
name : 'february',
itemId: 'february',
fieldLabel: 'February'
}
,
{
xtype: 'textfield',
name : 'march',
itemId: 'march',
fieldLabel: 'March'
},
{
xtype: 'textfield',
name : 'april',
itemId: 'april',
fieldLabel: 'April'
},
{
xtype: 'textfield',
name : 'may',
itemId: 'may',
fieldLabel: 'May'
},
{
xtype: 'textfield',
name : 'june',
itemId: 'june',
fieldLabel: 'June'
},
{
xtype: 'textfield',
name : 'july',
itemId: 'july',
fieldLabel: 'July'
},
{
xtype: 'textfield',
name : 'august',
itemId: 'august',
fieldLabel: 'August'
},
{
xtype: 'textfield',
name : 'september',
itemId: 'september',
fieldLabel: 'September'
},
{
xtype: 'textfield',
name : 'october',
itemId: 'october',
fieldLabel: 'October'
},
{
xtype: 'textfield',
name : 'november',
itemId: 'november',
fieldLabel: 'November'
},
{
xtype: 'textfield',
name : 'december',
itemId: 'december',
fieldLabel: 'December'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
})
Have you any tips for this issue? Thx for your help Manel
您对这个问题有什么建议吗？感谢您的帮助 Manel
采纳答案by nscrob
Extjs offers a very simple way of adding listeners, especially the extjs 4 mvc architecture. You should add the listeners to the controller of the view
Extjs 提供了一种非常简单的添加侦听器的方法，尤其是 extjs 4 mvc 架构。您应该将侦听器添加到视图的控制器
Ext.define('App.controller.SomeController', {
extend:'Ext.app.Controller',
init:function () {
this.control({
'hourspermonthwindow > form > textfield':{
change: this.handleOnChange
}
});
},
handleOnChange:function(textfield,newValue,oldValue){
//your code here
}
});
回答by smeerkahoven
Instead of {xtype : 'textfield' ... }
代替 {xtype : 'textfield' ... }
fields I have new Ext.form.TextField and I try this and work perfectly
字段我有新的 Ext.form.TextField 并且我尝试了这个并且完美地工作
new Ext.form.TextField({enableKeyEvents: true ,
listeners : {
change : function (f, e){
action_form_update_brdoutput(null, frmBRDOutput.getForm().getValues());
}
}
})
Extjs provides you listeners so you may overload them.
Extjs 为您提供了监听器，因此您可以重载它们。
回答by Austin Greco
Define a new component that extends textfieldand add the listener in there, and then use that in your form.
定义一个新组件，在其中扩展textfield和添加侦听器，然后在您的表单中使用它。
Just a simple changelistener should work.
只是一个简单的change听众应该工作。
Then add a css class with the color, or if you need different colors for each row, then set it through code and use a custom colorvar you pass in to your new component
然后添加一个带有颜色的 css 类，或者如果每行需要不同的颜色，然后通过代码设置它并使用color您传递给新组件的自定义变量
