如何将onChange方法添加到ExtJS 4表单中的所有字段(textField）中

How to add a onChange method to all fields (textField) in a ExtJS 4 form

本文关键字：字段 textField 表单 onChange 方法 添加 ExtJS      更新时间：2023-09-26

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

这是我目前的代码：

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

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

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

只要一个简单的change监听器就可以了。

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

代替{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为您提供了监听器，因此您可能会使它们过载。

相关文章：