Results 1 to 10 of 11

Thread: [4.1.1] grid renderer not work correctly

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default [4.1.1] grid renderer not work correctly

    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
                    }
                ]
            }
        });
    });

  2. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
      0  

    Default

    A renderer is intended for read-only formatting of a grid columns data, not real-time rendering of editable data.

    You'll most likely need to capture the validateedit event of the Ext.grid.plugin.CellEditing plugin, then strip out the line feeds there (where you may also want to do a replace on regex /\r/ to catch carriage returns).

  3. #3
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    Hi friend,
    Thank you for your reply.

    I'm sorry ppyy is my miss post.

    The problem previous post happens only when with 4.1.1GA.

    with 4.1 -> work. http://jsfiddle.net/mashiki/5bfQK/2/
    with 4.0.7 -> work. http://jsfiddle.net/mashiki/5bfQK/5/
    with 4.1.1-RC1,RC2 -> work.

    with 4.1.1GA -> NOT work. http://jsfiddle.net/mashiki/5bfQK/1/


    Is this 4.1.1's spec.? I can't believe.

  4. #4
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    Is it better for this problem to re-post to a bug forum?

  5. #5
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    Aren't there those who have the same problem as this some?

    Or please tell me another thread like this.

  6. #6
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default [4.1.1GA] Grid renderer not work after edit

    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:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • mac lion

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    312
    Vote Rating
    4
      0  

    Default

    I think it's the same problem ..

    http://www.sencha.com/forum/showthre...gin.RowEditing.

  8. #8
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    wki01,

    Thank you, for your reply.

    I tried Animals's and your patch.
    Both patches saves my problem1. (Icons are now able to update)

    http://jsfiddle.net/mashiki/5sKyH/14/

    And problem2 still remains.

  9. #9
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    Yeeeh, I found another bug 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;
                }
    Now the test case can work.

    http://jsfiddle.net/mashiki/5sKyH/17/

    wki01, Your hint is great help.
    Thank you very much.

  10. #10
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
      0  

    Default

    here is my override
    Code:
    Ext.define('ElementFix', {
        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) {
                dest.innerHTML = source.innerHTML; // HERE
                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);
                }
            }
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •