Question

如何在窗口内的表单的所有“文本字段”中添加 更改事件 ？首先，我创建一个窗体与窗体。所有字段都初始化为值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

Answer 1

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

Answer 2

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

只需一个简单的change监听器即可。

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

Answer 3

而不是{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为您提供了监听器，因此您可以重载它们。

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

3 个答案: