Sencha ExtJS PropertyEditor grid cell color

Question

I have a PropertyEditor in ExtJS.

Ext.define('PropertyEditorGrid', {
   //...
   this.flexColumnGrid = Ext.create('Ext.grid.property.Grid', {//...
          listeners:{
            propertychange: function (source, recordId, value,oldValue,eOpts){
               me.valueChange(me.id,recordId,value==null?null:value.toString(), oldValue==null?null:oldValue.toString());
            }
          }//...
   }

I want to use 'propertychange' function, if the value is not suitable then print the grid cell text in red color, otherwise print in black color. I tried to use http://skirtlesden.com/articles/styling-extjs-grid-cells, but it doesn't help me.

i added the following function: edit: function(editor, e) { e.grid.cls = 'x-grid-wrong-value'; console.log('afteredit'); } in the css : .x-grid-wrong-value{color: #f00} i see the log message, but the text isnt red — revell
get the td el from e. it will be in e.column add class to that or use validateEdit listener — Raghavendra
i added the class: edit : function(editor, e) { console.log(e.column.el); e.column.el.addCls('x-grid-wrong-value'); } but it's not work — revell

Raghavendra Raghavendra · Accepted Answer · 2015-08-13T14:35:07

you can do like this

Ext.get(e.row.getElementsByTagName('td')[e.colIdx]).addCls('wrongclass');

in edit event

you can use validateEdit to cancel the edit if necessary..

Sencha ExtJS PropertyEditor grid cell color

1 Answers