A few days back my work demanded to solve a not-so-trivial problem regarding ExtJS RowEditing (version 4.2. of the framework). I warn that this post requires an excellent knowledge of the framework to be of any use. The problem in short: there is a RowEditing plugin instance in which some of the cell values depend on others. Thus their values should update dynamically upon new value entries or value updates. So the interesting part began, which took me to a happy ending half a day later.

Firstly, what does the editor happen to be? It is an ext form, where the inedible cells happen to be displayfields. The documentation shows four events – beforeedit, afteredit, validateedit and canceledit.

So I decided to approach the thing by attaching event listeners to every field in the editor. Should an event be raised the values in the dependent cells are refreshed. As there was no way I could run this code just at the editor initialization, I used a ghost form event handler. What does that mean – all the RoweditingPlugin events are raised on multiple occasions during its lifetime. I use the beforeedit event to bind an empty function to the editor form for the “fieldvalidity” event. It is not used at all in this component and serves as a flag. It allows the real event handlers to be bidden just once, before the first editing activity. So what’s left is the pure mechanics of the code and the particular components and functions used. I could not find this technique in the documentation or anywhere in the Internet. The code with comments:

beforeedit: function(editor, context){{
    //gets the form of the row editor, which holds the updated values
    var form = editor.editor.getForm();
    if(form.events['fieldvaliditychange'] === undefined){
        console.log('Row editing formula updating on the fly initialized.');
        //sets empty event handler to indicate the actual ones have been assigned
        form.on('fieldvaliditychange', function(){});
        //set an event handler for the change event for any of the form fields
        form.getFields().items.forEach(function(f){ f.on('change', function(){
            //for each grid column if there is a formula, update it
                var columnName = c.dataIndex;
                //if there is a formula there is a function
                    var fieldToUpdate = form.getFields().items['find'](function(f){
                        if(f.getName() === columnName){
                            return f;
                    var newValue = c.updateRowEditorFormulaValue(form.getFields().items, columnName);

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 4 =