title: ExtJS 4 cell "renderer" problem
body: <p>After reading <a href="http://www.sencha.com/learn/grid-faq/" rel="nofollow noreferrer">this article</a>, I've managed to change rendering.</p>
  
  <p>I'm calling an internal function:</p>
  
  <pre><code>renderer: this.onRenderCell
  </code></pre>
  
  <p>And this function is like this:</p>
  
  <pre><code>onRenderCell: function(value, metaData, record, rowIndex,
    colIndex, store, view) {
    metaData.css = 'ini-cell-pas-traduit';
    return '&amp;laquo;'+value+'&amp;raquo;';
  }   
  </code></pre>
  
  <p>If you read carefully I return <code>'&amp;laquo;'+value+'&amp;raquo;';</code> so for <strong>each</strong> value it is transformed to: '<strong>&laquo;value&raquo;</strong>'; . This is a proof that on every single line, it works perfectly. So should it be for the css. But the css is applied one time out of two!! This drives me nuts.</p>
  
  <p>Here's what it gives (latest Firefox, same with latest Chrome):</p>
  
  <p><img src="https://i.stack.imgur.com/FGDy1.png" alt="ExtJS cell css problem"></p>
  
  <p>Any idea where I should take a look?</p>
  
  <p>Here's a big sample of my source code:</p>
  
  <pre><code>Ext.define('Lang.grid.Panel', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.langgrid',
  
      requires: [
          'Ext.grid.plugin.CellEditing',
          'Ext.form.field.Text',
          'Ext.toolbar.TextItem'
      ],
  
      initComponent: function(){
  
          this.editing = Ext.create('Ext.grid.plugin.CellEditing');
  
          Ext.apply(this, {
              iconCls: 'icon-grid',
              plugins: [this.editing],
              dockedItems: [{
                  xtype: 'toolbar',
                  items: [{
                      iconCls: 'icon-add',
                      text: 'Add',
                      scope: this,
                      handler: this.onAddClick
                  }, {
                      iconCls: 'icon-delete',
                      text: 'Delete',
                      disabled: true,
                      itemId: 'delete',
                      scope: this,
                      handler: this.onDeleteClick
                  }]
              }],
              columns: [{
                  text: 'label',
                  flex:2,
                  sortable: true,
                  dataIndex: 'label'
              },{
                header: 'fr',
                flex: 3,
                sortable: true,
                dataIndex: 'fr',
                renderer: this.onRenderCell,
                field: {
                  type: 'textfield'
                }
              },{
                header: 'es',
                flex: 3,
                sortable: true,
                dataIndex: 'es',
                renderer: this.onRenderCell,
                field: {
                  type: 'textfield'
                }
              },{
                header: 'us',
                flex: 3,
                sortable: true,
                dataIndex: 'us',
                renderer: this.onRenderCell,
                field: {
                  type: 'textfield'
                }
              }
              ]
          });
          this.callParent();
          this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
      },
  
      (...)
      (snip useless code)
      (...)
  
      onRenderCell: function(value, metaData, record, rowIndex,
        colIndex, store, view) {
        metaData.css = 'ini-cell-pas-traduit';
        return '&lt;span style="color:red; font-weight:bold;"&gt;&amp;laquo;'+
          value+'&amp;raquo;&lt;/span&gt;';
      }
  });
  </code></pre>