Akdora’s Blog

Programming, Oracle, Life, Fun

How to find changed columns in EditorGridPanel, ExtJS? February 6, 2009

Filed under: ExtJS — Akdora @ 9:35 pm
Tags: , , , ,

While we are using EditorGridPanel, if we change some data, we see a red sign on the corner of the cell. If you want to get the changed or unchanged column info via javascript code, then read the following writing.
You may see the Editor Grid Example . Then, let’s we have a data record as following:

 var myRecord = new Ext.data.Record.create([
  {name:'vcompanyname', type: 'string'},
  {name:'vcompanybilladdress', type: 'string'},
  {name:'vcompanyaddress', type: 'string'},
  {name:'vcompanycontact', type: 'string'},
  {name:'vcompanyphone', type: 'string'},
  {name:'vcompanyemail', type: 'string'},
  {name:'vcompanytaxdept', type: 'string'},
  {name:'vcompanytaxno', type: 'string'}

 We show the data on the EditorGridTable formatted in the Ext.data.Record. User opened the data on the page and changed some value of the table. And I want to find an answer to this question? Did phone value change? AND Did address value not change?

 function fn_checkChanges()
 var returnString = "You did not changed the following companies' addresses:";
 var tmpReturnString = "";
 var myGrid = Ext.getCmp('static-grid');
 var allRecords = myGrid.getStore().getModifiedRecords();
 var isThere = false;
 var willContinue = false;
 for (i=0;i < allRecords.length;i++)
   var dataNew = allRecords[i].data;
   var dataChanges = allRecords[i].getChanges(); 
   if(dataChanges.vcompanybilladdress == null || dataChanges.vcompanybilladdress == 'undefined')
    tmpReturnString = tmpReturnString + allRecords[i].data.vcompanyname + "<br/>";
     isThere = true;
 if( isThere == true )
   msg: returnString,
   buttons: Ext.MessageBox.YESNO,
   icon: Ext.MessageBox.QUESTION,
   fn: function (btn) {
    if (btn == 'yes') {
       willContinue=  true;
    else {
       willContinue=  false;
      willContinue= true;
 return willContinue;

Let’s check over the code;

That returns us the changed rows, even one column value changes.

 var allRecords = myGrid.getStore().getModifiedRecords();


Then this returns us the changed column names!

var dataChanges = allRecords[i].getChanges(); 


For example if user changed “dataChanges.vcompanybilladdress” value, then “dataChanges.vcompanybilladdress” will return us the NEW VALUE. If user did not change the value on “dataChanges.vcompanybilladdress”, then dataChanges.vcompanybilladdress will return us “undefined”!!.

I had searched this use for a few hours and trying doing this myself. I hope this helps you.

See u


3 Responses to “How to find changed columns in EditorGridPanel, ExtJS?”

  1. astro Says:

    Thank you I needed exactly this!
    Helped allot 🙂

  2. Prakash Says:

    It helped me a lot thank you

  3. Rahul Verma Says:

    Thanks very much….code is upto mark…

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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