Wednesday, March 11, 2015

ExtJS short highlight of a gridrow in case of an update

In my ExtJS code I often update the values of records associated with Stores/Data Models associated with Grid Panel. 
Sometimes this an automated update received from the web server (an example you can see here) sometimes not.
However, as a user I like to be able to see if somewhere in the grid some data has been modified.

And to create a code, that highlight for a moment the row or a cell where a change happened is actually not so hard. 

Here is a small example how you can do that - you just have to bind to event 'itemupdate' on a tableview. See the example bellow, that is supposed to be self explanatory:

Ext.ComponentQuery.query('#mytableview').on('itemupdate', function(record, index, node) {
    node.className = node.className + ' x-grid-item-alt';
    setTimeout(function() {
        node.className = node.className.replace(/x-grid-item-alt/, '');
    }, 500);
});

No comments:

Post a Comment