REQUIRED INFORMATION




Ext version tested:
  • Ext 4.1.1 GA
Browser versions tested against:
  • FF14.0.1 (firebug 1.10.1 installed)
  • GoogleChrome21.0.1180.57
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • with 4.1.1GA Grid renderer not work after edit.
This is re-post of http://www.sencha.com/forum/showthread.php?232805


Steps to reproduce the problem:
  • open http://jsfiddle.net/mashiki/5sKyH 4.1.1GA
  • change type cell's value(combobox)
  • click another cell
  • cell's icon is not changed (problem 1)
  • click Comment cell (textarea)
  • add line or delete line
  • click another cell
  • Comment cell is not rendered (problem 2)
The result that was expected:
  • open http://jsfiddle.net/mashiki/5sKyH/11 with 4.1.0
  • change type cell's value(combobox)
  • click another cell
  • cell's icon is changed (OK)
  • click Comment cell (textarea)
  • add line or delete line
  • click another cell
  • Comment cell is rendered (OK)
The result that occurs instead:Test Case:


Code:
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
]);


Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['c1', 'c2', 'comment']
});


Ext.onReady(function(){


    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'MyModel',
        data: (function(len) {
            for (var i=0,ret=[]; i<len; ++i) {
                ret.push({c1:i, c2:i%3,comment:"Record-"+i+"\na\nbbb"});
            }
            return ret;
        })(10)
    });


    // house the grid
    Ext.widget('viewport', {
        layout  : 'fit',
        items   : {
            xtype:'grid',
            plugins: {ptype:'cellediting', clicksToEdit:1},
            store     : store,
            columns   : [
                {text:'#', width:50, dataIndex:'c1', align:'right'},
                {
                    text:'type',
                    dataIndex:'c2',
                    renderer: function(v) {
                        return '<img src="http://cdn.sencha.io/ext-4.1.1-gpl/examples/app/feed-viewer/images/'+['post','rss','tabs'][v]+'.gif">'
                    },
                    editor: {
                        xtype:'combobox',
                        editable :false,
                        store:[[0,'post'],[1,'rss'],[2,'tabs']]
                    }
                },
                {
                    text:'Comment',
                    dataIndex:'comment',
                    renderer:function(v) {return v.replace(/\n/g,'<br>')},
                    editor:{xtype:'textarea',height:50},
                    flex:1
                }
            ]
        }
    });
});





HELPFUL INFORMATION
  • 4.1.1 GA NOT work
  • 4.1.0 GA work
  • 4.1.1 RC1 work
  • 4.1.1 RC2 work
  • 4.0.7 work (need little changes like 'Ext.widget -> Ext.create')
Screenshot or Video:


See this URL for live test case:
http://jsfiddle.net/mashiki/5sKyH 4.1.1GA (not work)
http://jsfiddle.net/mashiki/5sKyH/11 4.1.0 (work)


Debugging already done:

Possible fix:
Problem1
Perhaps EXTJSIV-6803 is same problem.

Problem2
In Ext.Element:: syncContents the vars source and dest must be reversed.
Code:
    // If the number of child nodes does not match, fall back to replacing innerHTML
    if (sourceLen !== destLen) {
        //source.innerHTML = dest.innerHTML; //HERE
        dest.innerHTML = source.innerHTML;
        return;
    }


Additional CSS used:
  • only default ext-all.css
Operating System:
  • mac lion
Follows are original post.

[4.1.1] grid renderer not work correctly

Here is simple example.
That has 3columns grid, and the comment column is editable with textarea.


My ploblem is
edit 'bbb' to 'ccc' renderer works
but if add a line or remove lines renderer not works


and store is updated and dirty mark(red triangle) is displayed.


http://jsfiddle.net/mashiki/5bfQK/1/ 4.1.1 problem
http://jsfiddle.net/mashiki/5bfQK/2/ 4.1 work fine (4.1.1 rc1,rc2 also work fine)

Is this DUP?

Code:
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
]);


Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['c1', 'c2', 'comment']
});


Ext.onReady(function(){


    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'MyModel',
        data: (function(len) {
            for (var i=0,ret=[]; i<len; ++i) {
                ret.push({c1:i, c2:i%3,comment:"Record-"+i+"\na\nbbb"});
            }
            return ret;
        })(10)
    });


    // house the grid
    Ext.widget('viewport', {
        layout  : 'fit',
        items   : {
            xtype:'grid',
            plugins: {ptype:'cellediting', clicksToEdit:1},
            store     : store,
            columns   : [
                {text:'column1', width:50, dataIndex:'c1', align:'right'},
                {text:'column2', width:50, dataIndex:'c2', align:'right'},
                {
                    text:'Comment',
                    dataIndex:'comment',
                    renderer:function(v) {return v.replace(/\n/g,'<br>')},
                    editor:'textarea',
                    flex:1
                }
            ]
        }
    });
});