CODEWITHSUNDEEP
javascriptextjs4
user1638045
user1638045

Reputation: 55

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

How can I add a change event to all 'text fields' of a form inside of a window? First I create a window with a form. All fields are initialized with a value of 0. I would like to detect the user input (maybe with dirtychange), and if the is greater than 1 then change the background color of the textField.

This is my code at the moment:

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

Have you any tips for this issue? Thx for your help Manel

Upvotes: 2

Views: 20377

Answers (3)

nscrob
nscrob

Reputation: 4483

Extjs offers a very simple way of adding listeners, especially the extjs 4 mvc architecture. You should add the listeners to the controller of the view

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

Upvotes: 2

smeerkahoven
smeerkahoven

Reputation: 173

Instead of {xtype : 'textfield' ... }

fields I have new Ext.form.TextField and I try this and work perfectly

new Ext.form.TextField({enableKeyEvents: true ,
    listeners : {
        change : function (f, e){
            action_form_update_brdoutput(null, frmBRDOutput.getForm().getValues());
        }
    }
})

Extjs provides you listeners so you may overload them.

Upvotes: 1

Austin Greco
Austin Greco

Reputation: 33544

Define a new component that extends textfield and add the listener in there, and then use that in your form.

Just a simple change listener should work.

Then add a css class with the color, or if you need different colors for each row, then set it through code and use a custom color var you pass in to your new component

Upvotes: 1

Related Questions