如何將的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形式

回答

相關問題