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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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]; if(f.isDirty()){ var data = {fieldName : f.getName(), originalValue : f.originalValue, newValue : f.getValue()}; changedData.push(data); } } return changedData; }; |
And you can call this function when user clicks on the Submit/Save/Post button. Something like this:
1 2 3 4 5 6 7 |
buttons: [{ text: 'Save', handler: function(b, e) { var x = this.panel.getChangedData(); }, scope: this }, {text: 'Reset'}] |
