[4.1.1] Refresh row in Ext.grid.plugin.RowEditing.

[wki01]

Using a grid with Ext.grid.plugin.RowEditing.
The values ​​of a column depend on values ​​edited on another column.
After the save is no longer made ​​the refresh of the line.


It worked perfectly in 4.1.1rc2

I solved it for now, but this means that whenever a record is updated the grid back to the first line.

......
plugins: [{
        ptype: 'filterbar',
        renderHidden: false
    },    
    rowedit = Ext.create('Ext.grid.plugin.RowEditing', {
        listeners: {
            edit: function (editor, event) {
                writeRecord( .... )        
                gridZORDEXTRSC.getView().refresh(); // <<<- added to see the updated data on the grid
            }
        }
    })
]
.....

Sorry for my bad English. translated using google
thanks

[mitchellsimoens]

So everything works just fine except the grid doesn't get refreshed?

[wki01]

Yes, that's it.
My case is that of columns whose value depends on the value of other columns.

thanks again

[Animal]

It works for me.

I have changed the example/grid/row-editing.js example to add a new, calculated column:

, {
            header: 'Pay grade',
            width: 70,
            renderer: function(v, meta, rec) {
                var salary = rec.get('salary');
                if (salary < 10000) {
                    return 'D';
                } else if (salary < 40000) {
                    return 'C';
                } else if (salary < 80000) {
                    return 'B';
                }
                return 'A';
            }
        }

When I upgrade someone on pay grade C to 100000, their pay grade column changes to "A"

[wki01]

Sorry for the delay. I'm back from vacation today.
Here's my test case.
Try cycling four or five times between the values ​​in the first column of the combo.

The problem occurs only in the case of icons.
I repeat. with rc2 works fine.
thanks again.

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');


Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);


Ext.onReady(function(){
    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
            'name',
            'email',
            { name: 'start', type: 'date', dateFormat: 'n/j/Y' },
            { name: 'salary', type: 'float' },            
            { name: 'active', type: 'bool' },
            { name: 'status'}
        ]
    });


    // Generate mock employee data
    var data = (function() {
        var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
            firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
            lastLen = lasts.length,
            firstLen = firsts.length,
            usedNames = {},
            data = [],
            s = new Date(2007, 0, 1),
            now = new Date(),
            getRandomInt = Ext.Number.randomInt,


            generateName = function() {
                var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
                if (usedNames[name]) {
                    return generateName();
                }
                usedNames[name] = true;
                return name;
            };


        while (s.getTime() < now.getTime()) {
            var ecount = getRandomInt(0, 3);
            for (var i = 0; i < ecount; i++) {
                var name = generateName();
                data.push({
                    start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
                    name : name,
                    email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
                    active: getRandomInt(0, 1),
                    salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
                });
            }
            s = Ext.Date.add(s, Ext.Date.MONTH, 1);
        }


        return data;
    })();


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'Employee',
        proxy: {
            type: 'memory'
        },
        data: data,
        sorters: [{
            property: 'start',
            direction: 'ASC'
        }]
    });


    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });


    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    Ext.define('modelSTATO', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'string', name: 'alias'},
            {type: 'string', name: 'name'}
        ]
    });
    
    var storeSTATO = Ext.create('Ext.data.Store', {
        model: 'modelSTATO',
        data: [
            {"alias":"0","name":"000"},
            {"alias":"1","name":"111"},
            {"alias":"2","name":"222"}
        ]
    });
    var column0 = Ext.create('Ext.grid.column.Column', {
         width : 100,   
        header: 'STATUS', 
        dataIndex: 'status',        
        renderer : function (val){
            if (val == "0") {
                return "000"
            } else if (val == "1") {
                return "111"
            } else if (val == "2") {
                return "222"
            } else {
                return "?"
            }
        },                 
        editor: {
            xtype: 'combo',
            displayField: 'name',
            valueField: 'alias',
            store: storeSTATO,
            editable: false,
            typeAhead: false,
            queryMode: 'local',            
            triggerAction: 'all'            
        }
    });    
    
    var column1 = Ext.create('Ext.grid.column.Column', {
        dataIndex: 'dummy',
        header: "SA",    
        width : 100,
        hideable: false,           
        renderer: function renderer(val, metaData, record, rowIndex, colIndex, store) {
            var value = record.get('status')       
            if (value == "0") {
                return '<img src="'+"../toolbar/images/add.gif"+'">'       
            } else if (value == "1") {
                return '<img src="'+"../toolbar/images/money_add.png"+'">'       
            } else if (value == "2") {
                return '<img src="'+"../toolbar/images/money_delete.png"+'">'                   
            }
            return "???";
        },
        sortable: false
    });
    
    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
        column0,
        column1,        
        {
            header: 'Name',
            dataIndex: 'name',
            flex: 1,
            editor: {
                // defaults to textfield if no xtype is supplied
                allowBlank: false
            }
        }, {
            header: 'Email',
            dataIndex: 'email',
            width: 160,
            editor: {
                allowBlank: false,
                vtype: 'email'
            }
        }, {
            xtype: 'datecolumn',
            header: 'Start Date',
            dataIndex: 'start',
            width: 90,
            editor: {
                xtype: 'datefield',
                allowBlank: false,
                format: 'm/d/Y',
                minValue: '01/01/2006',
                minText: 'Cannot have a start date before the company existed!',
                maxValue: Ext.Date.format(new Date(), 'm/d/Y')
            }
        }, {
            xtype: 'numbercolumn',
            header: 'Salary',
            dataIndex: 'salary',
            format: '$0,0',
            width: 90,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }
        }, {
            xtype: 'checkcolumn',
            header: 'Active?',
            dataIndex: 'active',
            width: 60,
            editor: {
                xtype: 'checkbox',
                cls: 'x-grid-checkheader-editor'
            }
        }],
        renderTo: 'editor-grid',
        width: 600,
        height: 400,
        title: 'Employee Salaries',
        frame: true,
        tbar: [{
            text: 'Add Employee',
            iconCls: 'employee-add',
            handler : function() {
                rowEditing.cancelEdit();


                // Create a model instance
                var r = Ext.create('Employee', {
                    name: 'New Guy',
                    email: 'new@sencha-test.com',
                    start: new Date(),
                    salary: 50000,
                    active: true
                });


                store.insert(0, r);
                rowEditing.startEdit(0, 0);
            }
        }, {
            itemId: 'removeEmployee',
            text: 'Remove Employee',
            iconCls: 'employee-remove',
            handler: function() {
                var sm = grid.getSelectionModel();
                rowEditing.cancelEdit();
                store.remove(sm.getSelection());
                if (store.getCount() > 0) {
                    sm.select(0);
                }
            },
            disabled: true
        }],
        plugins: [rowEditing],
        listeners: {
            'selectionchange': function(view, records) {
                grid.down('#removeEmployee').setDisabled(!records.length);
            }
        }
    });
});

[Animal]

Yes, the fix is

Ext.override(Ext.Element, {
        syncContent: function(source) {
            source = Ext.getDom(source);
            var me = this,
                sourceNodes = source.childNodes,
                sourceLen = sourceNodes.length,
                dest = me.dom,
                destNodes = dest.childNodes,
                destLen = destNodes.length,
                i,  destNode, sourceNode,
                nodeType, newAttrs, attLen, attName;

            // Copy top node's attributes across. Use IE-specific method if possible.
            if (dest.mergeAttributes) {
                dest.mergeAttributes(source, true);
            } else {
                newAttrs = source.attributes;
                attLen = newAttrs.length;
                for (i = 0; i < attLen; i++) {
                    attName = newAttrs[i].name;
                    if (attName !== 'id') {
                        dest.setAttribute(attName, newAttrs[i].value);
                    }
                }
            }

            // If the number of child nodes does not match, fall back to replacing innerHTML
            if (sourceLen !== destLen) {
                source.innerHTML = dest.innerHTML;
                return;
            }

            // Loop through source nodes.
            // If there are fewer, we must remove excess
            for (i = 0; i < sourceLen; i++) {
                sourceNode = sourceNodes[i];
                destNode = destNodes[i];
                nodeType = sourceNode.nodeType;

                // If node structure is out of sync, just drop innerHTML in and return
                if (nodeType !== destNode.nodeType || (nodeType === 1 && sourceNode.tagName !== destNode.tagName)) {
                    dest.innerHTML = source.innerHTML;
                    return;
                }

                // Update text node
                if (nodeType === 3) {
                    destNode.data = sourceNode.data;
                }
                // Sync element content
                else {
                    if (sourceNode.id && destNode.id !== sourceNode.id) {
                        destNode.id = sourceNode.id;
                    }
                    destNode.style.cssText = sourceNode.style.cssText;
                    destNode.className = sourceNode.className;
                    Ext.fly(destNode).syncContent(sourceNode);
                }
            }
        }
});

[wki01]

The fix works in all browsers but not in IE.


thanks

[wki01]

so you work all browsers including IE
thanks

Ext.override(Ext.Element, {
        syncContent: function(source) {
            source = Ext.getDom(source);
            var me = this,
                sourceNodes = source.childNodes,
                sourceLen = sourceNodes.length,
                dest = me.dom,
                destNodes = dest.childNodes,
                destLen = destNodes.length,
                i,  destNode, sourceNode,
                nodeType, newAttrs, attLen, attName;

                newAttrs = source.attributes;
                attLen = newAttrs.length;
                for (i = 0; i < attLen; i++) {
                    attName = newAttrs[i].name;
                    if (attName !== 'id') {
                        dest.setAttribute(attName, newAttrs[i].value);
                    }
                }

            // If the number of child nodes does not match, fall back to replacing innerHTML
            if (sourceLen !== destLen) {
                source.innerHTML = dest.innerHTML;
                return;
            }

            // Loop through source nodes.
            // If there are fewer, we must remove excess
            for (i = 0; i < sourceLen; i++) {
                sourceNode = sourceNodes[i];
                destNode = destNodes[i];
                nodeType = sourceNode.nodeType;

                // If node structure is out of sync, just drop innerHTML in and return
                if (nodeType !== destNode.nodeType || (nodeType === 1 && sourceNode.tagName !== destNode.tagName)) {
                    dest.innerHTML = source.innerHTML;
                    return;
                }

                // Update text node
                if (nodeType === 3) {
                    destNode.data = sourceNode.data;
                }
                // Sync element content
                else {
                    if (sourceNode.id && destNode.id !== sourceNode.id) {
                        destNode.id = sourceNode.id;
                    }
                    destNode.style.cssText = sourceNode.style.cssText;
                    destNode.className = sourceNode.className;
                    Ext.fly(destNode).syncContent(sourceNode);
                }
            }
        }
});

[Animal]

Doing it like that IE will try to copy all possible attributes across. In my testing, it gets newattrs.length as 154!

So I prefer the following fix for that code block:

            // Copy top node's attributes across. Use IE-specific method if possible.
            if (dest.mergeAttributes) {
                dest.mergeAttributes(source, true);

                // EXTJSIV-6803. IE's mergeAttributes appears not to make the source's "src" value available until after the image is ready.
                // So programatically copy any src attribute.
                dest.src = source.src;
            } else {
                newAttrs = source.attributes;
                attLen = newAttrs.length;
                for (i = 0; i < attLen; i++) {
                    attName = newAttrs[i].name;
                    if (attName !== 'id') {
                        dest.setAttribute(attName, newAttrs[i].value);
                    }
                }
            }

[wki01]

Here, too?
thanks

Ext.view.Table : onUpdate

                    // Copy new row attributes across. Use IE-specific method if possible.
                    if (oldRowDom.mergeAttributes) {
                        oldRowDom.mergeAttributes(newRow, true);
                    } else {
                        newAttrs = newRow.attributes;
                        attLen = newAttrs.length;
                        for (i = 0; i < attLen; i++) {
                            attName = newAttrs[i].name;
                            if (attName !== 'id') {
                                oldRowDom.setAttribute(attName, newAttrs[i].value);
                            }
                        }
                    }