ExtJS 4 cell "renderer" problem

After reading this article, I've managed to change rendering.

I'm calling an internal function:

renderer: this.onRenderCell

And this function is like this:

onRenderCell: function(value, metaData, record, rowIndex,
  colIndex, store, view) {
  metaData.css = 'ini-cell-pas-traduit';
  return '«'+value+'»';
}   

If you read carefully I return '«'+value+'»'; so for each value it is transformed to: '«value»'; . 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.

Here's what it gives (latest Firefox, same with latest Chrome):

Any idea where I should take a look?

Here's a big sample of my source 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: 'te开发者_JAVA技巧xtfield'
              }
            },{
              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 '<span style="color:red; font-weight:bold;">&laquo;'+
        value+'&raquo;</span>';
    }
});

---

In the metadata.css (ini-cell-pas-traduit) do this for background-color

background-color : red !important //or whichever color you've specified.

EDIT : This is happening because the grid is configured with stripeRows : true. I dunno if this is done by default or you did it in the config but forgot to mention it here. When you use stripeRows it sets a background-color which can be overriden using the !important keyword.

---

Varun Achar is right about using !important, but since you are using Ext JS 4 you should also change

metaData.css = 'ini-cell-pas-traduit';

to

metaData.tdCls = 'ini-cell-pas-traduit';

The 'css' and 'attr' members of metaData have now been replaced with tdCls and tdAttr and the old ones will only work in Ext JS 4 if you also install the Ext 3 compatibility layer.