javascript - Extjs Grid panel one column background Cambio de color en otro valor de columna

extjs3

Question

Tengo un panel Extjs Editor Grid en el que tengo que cambiar el CSS de una columna dependiendo del valor de otro valor de columna, y cómo hacerlo. No puedo usar la función de renderizador porque funciona en onload. ¿Hay alguna otra forma en que adjunte el código? en el cual tengo la columna de género y la columna de Id. para que cuando la columna de género seleccione el varón, el color de fondo de la ID cambie a Color rosa, de lo contrario, no sé cómo hacerlo.

 {
id: ''value'',
name: ''value'',
header: ''Gender'',
dataIndex: ''insured'',
width: 100,
editor: new fm.ComboBox({
typeAhead: true,
displayField: ''gender'',
mode: ''local'',
transform: ''gender'',
triggerAction: ''all'',
selectOnFocus: true,
forceSelection: true,
stripeRows: true,
lazyRender: true,
listeners: {
}
}
})
},
{
id: ''ID'',
name: ''ID'',
header: ''ID'',
dataIndex: ''ID'',
width: 100,
hidden: true,
editor: new fm.TextField({
allowBlank: true,
maxLength: 500
})
}

Answer 1

Esto funcionará para una representación simple

CSS:

.custom-column
{
background-color: #ccc;
}

JavaScript:

columns: [{
dataIndex: ''name'',
renderer: function (value, meta) {
meta.css = ''custom-column'';
return value;
}
}]

Editar:

Puede usar getRowClass para aplicar clases de CSS personalizadas a las filas durante el procesamiento.

Anule esta función para aplicar clases de CSS personalizadas a las filas durante el procesamiento. Esta función debe devolver el nombre de la clase CSS (o la cadena vacía '''' para ninguno) que se agregará al div de ajuste de la fila. Para aplicar nombres de clases múltiples, simplemente devuélvalos delimitados por espacios dentro de la cadena (por ejemplo, ''my-class another-class'').

Javascript:

columns: [{
dataIndex: ''ID'',
...
tdCls: ''ID'' //add table css class
}],
viewConfig: {
getRowClass: function(record, index) {
var gender = record.get(''insured'');
if (gender === 0) {
//male
return ''gender-male'';
} else if (gender === 1) {
//female
return ''gender-female'';
} else {
//unknown
return ''gender-unknown'';
}
}
}

CSS adicional :

.gender-male .ID {
background-color: #088da5;
}
.gender-female .ID {
background-color: #f799af;
}
.gender-unknown .ID {
background-color: #BADA55;
}