如何将的onChange方法添加到在ExtJS的4形式

我如何添加一个改变事件到表格的所有“文本字段”窗口中的所有字段（文本框）？首先，我创建一个窗体窗体。所有字段初始化值为0.我想检测用户输入（可能与dirtychange），如果大于1，则更改textField的背景颜色。如何将的onChange方法添加到在ExtJS的4形式

这是我的代码的时刻：

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

你有没有为这个问题的任何提示？ Thx寻求帮助 Manel

来源

2012-08-31 user1638045

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

的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-31 13:18:24 nscrob

谢谢，这工作得很好！ – user1638045

定义一个新组件，该组件扩展textfield并在其中添加侦听器，然后在窗体中使用该组件。

只是一个简单的change监听器应该工作。

然后添加一个CSS类的颜色，或者如果你需要不同颜色的每一行，然后将其设置通过代码和使用您传递给你的新组件定制color VAR

来源

2012-08-31 12:41:34

相反{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-10 14:06:27 smeerkahoven

如何将的onChange方法添加到在ExtJS的4形式

回答

相关问题