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
    ppyy is on a distinguished road

      0  

    Default [4.1.1] grid renderer not work correctly

    [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 - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      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
    mashiki is on a distinguished road

      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
    mashiki is on a distinguished road

      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
    mashiki is on a distinguished road

      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
    mashiki is on a distinguished road

      0  

    Default [4.1.1GA] Grid renderer not work after edit

    [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
      Ext JS Premium Member
      Join Date
      Nov 2008
      Posts
      274
      Vote Rating
      1
      wki01 is on a distinguished road

        0  

      Default


      I think it's the same problem ..

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

    • #8
      Sencha User mashiki's Avatar
      Join Date
      Oct 2007
      Location
      Japan
      Posts
      139
      Vote Rating
      0
      mashiki is on a distinguished road

        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
      Sencha User mashiki's Avatar
      Join Date
      Oct 2007
      Location
      Japan
      Posts
      139
      Vote Rating
      0
      mashiki is on a distinguished road

        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
      Sencha User mashiki's Avatar
      Join Date
      Oct 2007
      Location
      Japan
      Posts
      139
      Vote Rating
      0
      mashiki is on a distinguished road

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

    film izle

    hd film izle

    film sitesi

    takipci kazanma sitesi

    takipci kazanma sitesi

    güzel olan herşey

    takipci alma sitesi

    komik eğlenceli videolar