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

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

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/
http://youtu.be/KGRz042YhMo 0%

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

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

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

Or please tell me another thread like this.

[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

I think it's the same problem ..

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

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.

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.

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