Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6803 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

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

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


    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.
    Code:
    ......
    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So everything works just fine except the grid doesn't get refreshed?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

    Default


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

    thanks again

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It works for me.

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

    Code:
    , {
                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"

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

    Default


    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.



    Code:
    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);
                }
            }
        });
    });

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, the fix is

    Code:
    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);
                    }
                }
            }
    });

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

    Default


    The fix works in all browsers but not in IE.


    thanks

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

    Default


    so you work all browsers including IE
    thanks

    Code:
    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);
                    }
                }
            }
    });

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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:

    Code:
                // 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);
                        }
                    }
                }

  10. #10
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    278
    Vote Rating
    2
    wki01 is on a distinguished road

      0  

    Default


    Here, too?
    thanks

    Ext.view.Table : onUpdate



    Code:
                        // 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);
                                }
                            }
                        }

Thread Participants: 2