2

如何将更改事件添加到窗口内表单的所有“文本字段”？首先，我创建一个带有表单的窗口。所有字段都使用 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);
  }
})

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

4

3 回答 3

2

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
    }
});
于 2012-08-31T13:18:24.943 回答
1

代替 {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 为您提供了侦听器，因此您可以重载它们。

于 2012-10-10T14:06:27.957 回答
1

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

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

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

于 2012-08-31T12:41:34.770 回答