ExtJS 4-cell "visualizer"

Question

After reading in this article, I was able to change the rendering.

I am calling an internal function:

renderer: this.onRenderCell 

And this function is as follows:

 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 the value of each it is converted to: ' & laquo; value & raquo; ';, This is proof that it works perfectly on every single line. So it should be for css. But css is applied once in two! It drives me crazy.

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

Any idea where I should look?

Here is a great example 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: '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 '<span style="color:red; font-weight:bold;">&laquo;'+ value+'&raquo;</span>'; } }); 

Answer 1

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

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

EDIT: This is because the mesh is configured using stripeRows : true . I do not know 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 the background-color , which can be overridden with the !important keyword.

Answer 2

Varun Ahar is right about the use! important, but since you are using Ext JS 4, you must also change

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

to

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

MetaData members 'css' and 'attr' are now replaced by tdCls and tdAttr, while the old ones will only work in Ext JS 4, if you also set the compatibility level with Ext 3.