During my recent performance testing with Ext JS I came across the Ext.data.Store datachanged event, which was causing some pretty large performance issues.  The datachanged event is documented as fired “when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a widget that is using this Store as a Record cache should refresh its view.”  This seems to be used often in the specific application I have been looking at, due to the fact that there is a lot of background calculation causing data records to be changed behind grids.  I have created a small example application in Ext JS to show the purpose of the datachanged event, and the possible issues developers may run into with it.

The example consists of a basic grid and store with some static data loaded into it.  There are four buttons on the bottom toolbar of the grid to show different functionality.  The first button:

xtype: 'button',
text: 'Add',
handler: function(button, event) {
  myStore.each(function(record) {
    record.data.first += "s";
    record.data.last += ".";
    record.data.fullname = record.data.first + " " + record.data.last;
  });
  myStore.fireEvent('datachanged', myStore);
}

simply modifies each record in the store slightly, and then fires the datachanged event afterward.  This is a quick and proper way to modify the records, and then show the changes in the grid.  The second button:

xtype: 'button',
text: 'Remove',
handler: function(button, event) {
  myStore.each(function(record) {
    if (record.data.last.substring(record.data.last.length-1) == ".")
    {
      record.data.first = record.data.first.substring(0, record.data.first.length-1);
      record.data.last = record.data.last.substring(0, record.data.last.length-1);
      record.data.fullname = record.data.first + " " + record.data.last;
    }
  });
  myStore.fireEvent('datachanged', myStore);
}

is similar to the first, and simply removes the changes added by the first button. The third button is where we start to see the importance of the datachanged event:

xtype: 'button',
text: 'Add without datachanged',
handler: function(button, event) {
  myStore.each(function(record) {
    record.data.first += "s";
    record.data.last += ".";
    record.data.fullname = record.data.first + " " + record.data.last;
  });
}

This button has the same functionality as the first, except the datachanged event is not fired.  This means that all of the records behind the grid have changed – but the user will not be able to see these changes.  To see the full effect of this, try adding a few times without the datachanged, and then clicking remove once – at which point there should actually be an increase in characters.

The fourth and fifth buttons:

{
  xtype: 'button',
  text: 'Add with many datachanged',
  handler: function(button, event) {
    myStore.each(function(record) {
      record.data.first += "s";
      record.data.last += ".";
      record.data.fullname = record.data.first + " " + record.data.last;
      myStore.fireEvent('datachanged', myStore);
    });
  }
},
{
  xtype: 'tbseparator'
},
{
  xtype: 'button',
  text: 'Add more records',
  handler: function(button, event) {
    myStore.loadData(myData, true);
  }
}]

The purpose of these two buttons is to show performance issues with the datachanged event.  The difference between this add button and the previous one is that the datachanged event is fired on each iteration of the loop modifying the records, instead of after the loop completes and all of the records have been modifying.  The second button will add more records to the store – for the purpose of exaggerating the effect.  Try it out a few times. The ‘Add with many datachanged’ button should get very slow with 15-20 records in the grid, and most likely unusable after 30-50 records depending on processing power of your browser and computer.

I hope this example application and small code examples have helped.  You can access the full javascript for the application here.  Please feel free to leave a comment if you have any feedback or questions.