Javascript 如何向ExtJS4表单中的所有字段（textField）添加onChange方法

如何将更改事件添加到窗口内表单的所有“文本字段”？首先，我用一个窗体创建一个窗口。所有字段都用值0初始化。我想用dirtychange检测用户输入，如果大于1，则更改文本字段的背景色

这是我目前的代码：

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

你对这个问题有什么建议吗？ 谢谢你的帮助

---

Manel定义一个扩展textfield的新组件，并在其中添加侦听器，然后在表单中使用它

只要一个简单的更改侦听器就可以了

---

然后添加一个带有颜色的css类，或者如果您需要为每行添加不同的颜色，则通过代码对其进行设置，并使用传入新组件的自定义颜色变量定义一个扩展textfield的新组件，并在其中添加侦听器，然后在表单中使用它

只要一个简单的更改侦听器就可以了

---

然后添加一个带有颜色的css类，或者如果您需要为每行添加不同的颜色，则通过代码对其进行设置，并使用传入新组件的自定义颜色变量

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

---

Extjs提供了一种添加监听器的非常简单的方法，特别是extjs4mvc体系结构。您应该将侦听器添加到视图的控制器中

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

而不是{xtype:'textfield'…}

字段我有了新的Ext.form.TextField，我尝试了这个，并且工作得非常完美

new Ext.form.TextField({enableKeyEvents: true ,
    listeners : {
        change : function (f, e){
            action_form_update_brdoutput(null, frmBRDOutput.getForm().getValues());
        }
    }
})

Extjs为您提供了侦听器，因此您可以重载它们。

而不是{xtype:'textfield'…}

字段我有了新的Ext.form.TextField，我尝试了这个，并且工作得非常完美

new Ext.form.TextField({enableKeyEvents: true ,
    listeners : {
        change : function (f, e){
            action_form_update_brdoutput(null, frmBRDOutput.getForm().getValues());
        }
    }
})

---

Extjs为您提供了侦听器，因此您可以重载它们。

这些文本字段在HTML中呈现为什么？如果extjs不提供简单的方法，您可以通过javascript附加处理程序。这些文本字段在HTML中呈现为什么？如果extjs没有提供简单的方法，那么可以通过javascript附加处理程序。