[4.1.1] grid renderer not work correctly

**ppyy** · 25 Jul 2012 11:30 PM

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

**friend** · 26 Jul 2012 6:55 AM

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).

**mashiki** · 26 Jul 2012 6:40 PM

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.

**mashiki** · 29 Jul 2012 3:40 PM

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

**mashiki** · 1 Aug 2012 11:10 PM

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

Or please tell me another thread like this.

**mashiki** · 4 Aug 2012 2:36 PM

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

**wki01** · 6 Aug 2012 12:30 AM

I think it's the same problem ..

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

**mashiki** · 6 Aug 2012 4:24 AM

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.

**mashiki** · 6 Aug 2012 11:41 PM

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.

**mashiki** · 12 Sep 2012 10:35 AM

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

[4.1.1] grid renderer not work correctly

Thread Tools

Search Thread

Display

[4.1.1] grid renderer not work correctly

[4.1.1] grid renderer not work correctly

[4.1.1GA] Grid renderer not work after edit

[4.1.1GA] Grid renderer not work after edit