Finding out what all has changed on a Form

Many a times, to optimise the amount of data to be sent to the server, you may have a need to find out what exactly has changed on a form so that you can send only the changed data to the back-end rather than the complete data. Also, from audit purpose, it is very important that we identify what fields user has actually changed so that the proper logging may be done on the server side. Here is a way to achieve this on a form panel:

    isDirty() function: ExtJS provides the isDirty() function for all the form fields as well on the FormPanel. The call to isDirty() returns true when the value of a form field has changed from its original value. For a FormPanel the call returns true if any field of a FormPanel has changed from its original value. If the form panel is not too big (not having 100s of fields), then the easiest way to get what has changed is to check whether the form fields are marked dirty. The following code adds a function getChangedData() to the FormPanel, which loops through each form item and checks whether they are marked dirty or not. If yes, the function returns the field name, original value, and the new value.

    Ext.form.FormPanel.prototype.getChangedData = function() {
    var changedData = Array();
    var itemsList = this.form.items.items;
    for (var i = 0; i < itemsList.length; i++){
    f = itemsList[i];
    var data = {fieldName : f.getName(),
    originalValue : f.originalValue,
    newValue : f.getValue()};

    return changedData;

    And you can call this function when user clicks on the Submit/Save/Post button. Something like this:

    buttons: [{
    text: 'Save',
    handler: function(b, e) {
    var x = this.panel.getChangedData();
    scope: this
    }, {text: 'Reset'}]

Tagged with: , , , , , ,
Posted in Sencha ExtJS
One comment on “Finding out what all has changed on a Form
  1. Walking Tree says:

    If you are registered with Packt Publication then you may like to refer to below link to develop further understanding about forms

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: