CellRenderer en Datagrid y comportamiento anómalo

[night.noise]

Hola a todos. Tengo un mal problema del que no he encontrado referencias (ni buenas ni malas) en Internet.

He creado un archivo .AS (clase para CellRenderer) para dar a mi Datagrid la posibilidd de mostrar un color de texto distinto en algunas celdas de dos columnas. Mostrará un color diferente en la columna 'D0p' si el valor en 'E0p' es 1, y mostrará otro color diferente en la columna 'D0s' si el valor en 'E0s' es 1. En el resto de casos el color de texto será el de defecto. Incluyo el código de la clase.

Nada difícil en principio. Funciona bien, pero el problema reside en las filas que no se muestran en pantalla porque están por debajo del área de visualización o rowCount en la carga del fotograma. Para las filas que estan en posiciones superiores al rowCount (que no se ven) se les aplica mal el color. Y por distintas pruebas que he hecho se les aplica mal cualquier CellRenderer que sea condicional en el setValue.

Pido ayuda. Necesito solucionar el tema porque tengo todo acabado y se me está echando el tiempo encima. No tengo ideas ni encuentro nada relacionado.


Gracias
Un saludo


/******* Inicio código *******/
class EleCntDat extends mx.core.UIComponent{

var lblDato;
var owner;
var listOwner;
var getCellIndex : Function;

//Constructor
function EleCntDat(){

}

function createChildren():Void{
lblDato = createLabel("lblDato", 10);

//Estilo de la etiqueta
lblDato.styleName = listOwner;
lblDato.selectable = false;
lblDato.tabEnabled = false;
lblDato.background = false;
lblDato.border = false;
}

function size():Void{
lblDato._width = __width;
lblDato._height = __height;
}

function getPreferredHeight():Number{
return owner.__height - 4;
}

function setValue(suggested:String, item:Object, selected:Boolean):Void{
if(item!=undefined){
var index = getCellIndex();
var sAux=listOwner.getColumnAt(index.columnIndex).colu mnName;

if((sAux=="D0p")&&(item.E0p==1)) lblDato.color=0x0000FF;
else if((sAux=="D0s")&&(item.E0s==1)) lblDato.color=0xFF0000;
}
lblDato.text = suggested;
}
}
/****** Fin Código ******/

[TMeister]

asi a bote pronto si probar.

Estas creando una nueva etiqueta para todas las celdas de tu columna. por que no pruebas crear la etiqueta solo para las celdas que cumplan con tu IF. me explico..

[night.noise]

¿Y cómo?. Tendría que saber en el createChildren el valor de la columna 'E0p' ó 'E0s' y no sé cómo. O crear la etiqueta en el setValue en función del valor de dichas columnas. Y creo que ya lo he intentado sin mucho éxito.

Pero por intentar que no quede. Ya contaré el resultado.

Gracias

[night.noise]

Bueno, pues como después de las pruebas no consigo nada he preparado un pequeño ejemplo de lo que he descrito al comienzo del Tema.

Aparte de crear un archivo 'EleCntDat.as' con el código incluido en el primer mensaje del Tema, hay que crear un proyecto Flash que simplemente contega un Datagrid con el nombre de Instancia 'myDataGrid' de unos 450 x 257 (ancho x alto) con un único fotograma.

En el código del primer fotograma incluir el siguiente código:

/**** Inicio del código ****/
function cDato(){
this.DatLinea = new Array();
}
function cDatLinea(fld01,fld02,fld03,fld04,fld05,fld06,fld0 7,fld08,fld09){
this.Fld01=fld01;
this.Fld02=fld02;
this.Fld03=fld03;
this.Fld04=fld04;
this.Fld05=fld05;
this.Fld06=fld06;
this.Fld07=fld07;
this.Fld08=fld08;
this.Fld09=fld09;
}
var Datos = new cDato();
Datos.DatLinea[0] = new cDatLinea("Texto 1","Azul",1,1,"Prm Texto 1","Negro",2,0,"");
Datos.DatLinea[1] = new cDatLinea("Texto 2","Negro",1,0,"","Rojo",2,1,"Cns Texto 2");
Datos.DatLinea[2] = new cDatLinea("Texto 3","Azul",1,1,"Prm Texto 3","Negro",2,0,"");
Datos.DatLinea[3] = new cDatLinea("Texto 4","Azul",1,1,"Prm Texto 4","Negro",2,0,"");
Datos.DatLinea[4] = new cDatLinea("Texto 5","Negro",1,0,"","Rojo",2,1,"Cns Texto 5");
Datos.DatLinea[5] = new cDatLinea("Texto 6","Azul",1,1,"Prm Texto 6","Negro",2,0,"");
Datos.DatLinea[6] = new cDatLinea("Texto 7","Azul",1,1,"Prm Texto 7","Negro",2,0,"");
Datos.DatLinea[7] = new cDatLinea("Texto 8","Azul",1,1,"Prm Texto 8","Negro",2,0,"");
Datos.DatLinea[8] = new cDatLinea("Texto 9","Negro",1,0,"","Rojo",2,1,"Cns Texto 9");
Datos.DatLinea[9] = new cDatLinea("Texto 10","Negro",1,0,"","Rojo",2,1,"Cns Texto 10");
Datos.DatLinea[10] = new cDatLinea("Texto 11","Azul",1,1,"Prm Texto 11","Negro",2,0,"");
Datos.DatLinea[11] = new cDatLinea("Texto 12","Azul",1,1,"Prm Texto 12","Negro",2,0,"");
Datos.DatLinea[12] = new cDatLinea("Texto 13","Azul",1,1,"Prm Texto 1","Negro",2,0,"");
Datos.DatLinea[13] = new cDatLinea("Texto 14","Negro",1,0,"","Rojo",2,1,"Cns Texto 2");
Datos.DatLinea[14] = new cDatLinea("Texto 15","Azul",1,1,"Prm Texto 3","Negro",2,0,"");
Datos.DatLinea[15] = new cDatLinea("Texto 16","Azul",1,1,"Prm Texto 4","Negro",2,0,"");
Datos.DatLinea[16] = new cDatLinea("Texto 17","Negro",1,0,"","Rojo",2,1,"Cns Texto 5");
Datos.DatLinea[17] = new cDatLinea("Texto 18","Azul",1,1,"Prm Texto 6","Negro",2,0,"");
Datos.DatLinea[18] = new cDatLinea("Texto 19","Azul",1,1,"Prm Texto 7","Negro",2,0,"");
Datos.DatLinea[19] = new cDatLinea("Texto 20","Azul",1,1,"Prm Texto 8","Negro",2,0,"");
Datos.DatLinea[20] = new cDatLinea("Texto 21","Negro",1,0,"","Rojo",2,1,"Cns Texto 9");
Datos.DatLinea[21] = new cDatLinea("Texto 22","Negro",1,0,"","Rojo",2,1,"Cns Texto 10");
Datos.DatLinea[22] = new cDatLinea("Texto 23","Azul",1,1,"Prm Texto 11","Negro",2,0,"");
Datos.DatLinea[23] = new cDatLinea("Texto 24","Azul",1,1,"Prm Texto 12","Negro",2,0,"");
function load(){
myDataGrid.dataProvider.removeAll();

for(var i=0;i<Datos.DatLinea.length;i++){
linea_add(Datos.DatLinea[i].Fld01,
Datos.DatLinea[i].Fld02,
Datos.DatLinea[i].Fld03+"%",
Datos.DatLinea[i].Fld04,
Datos.DatLinea[i].Fld05,
Datos.DatLinea[i].Fld06,
Datos.DatLinea[i].Fld07+"%",
Datos.DatLinea[i].Fld08,
Datos.DatLinea[i].Fld09,
i);
}
function linea_add(descrip,datprmtor,prcprmtor,edtprmtor,hl pprmtor,datcnstor,prccnstor,edtcnstor,hlpcnstor,id xfile){
myDataGrid.dataProvider.addItem
(
{C01: descrip,
H0p: hlpprmtor,
D0p: datprmtor,
P0p: prcprmtor,
E0p: edtprmtor,
H0s: hlpcnstor,
D0s: datcnstor,
P0s: prccnstor,
E0s: edtcnstor,
IdxFil: idxfile}
);
}
}
dsgn();
load();
myDataGrid.rowCount=13;

function delc(){
myDataGrid.removeAllColumns();
}
function dsgn(){
import mx.controls.gridclasses.DataGridColumn;

myDataGrid.setSize(450,310);
myDataGrid.editable=true;
myDataGrid.resizableColumns=false;

myDataGrid.removeAllColumns();

var column = new DataGridColumn("C01");
column.headerText = "Descripción";
column.width = 210;
column.resizable = false;
column.textAlign = "left";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("H0p");
column.headerText = "";
column.width = 0;
column.resizable = false;
column.textAlign = "left";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("D0p");
column.headerText = "Cab. x";
column.width = 70;
column.resizable = false;
column.textAlign = "right";
column.editable = false;
column.sortable = false;
column.cellRenderer="EleCntDat"
myDataGrid.addColumn(column);

var column = new DataGridColumn("P0p");
column.headerText = "xx";
column.width = 40;
column.textAlign = "right";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("E0p");
column.headerText = "";
column.width = 0;
column.resizable = false;
column.textAlign = "left";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("H0s");
column.headerText = "";
column.width = 0;
column.resizable = false;
column.textAlign = "left";
column.setStyle("borderStyle","none");
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("D0s");
column.headerText = "Cab. y";
column.width = 70;
column.resizable = false;
column.textAlign = "right";
column.editable = false;
column.sortable = false;
column.cellRenderer="EleCntDat";
myDataGrid.addColumn(column);

var column = new DataGridColumn("P0s");
column.headerText = "yy";
column.width = 40;
column.resizable = false;
column.textAlign = "right";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

var column = new DataGridColumn("E0s");
column.headerText = "";
column.width = 0;
column.resizable = false;
column.textAlign = "left";
column.editable = false;
column.sortable = false;
myDataGrid.addColumn(column);

DGLstPress = new Object();
DGLstPress.cellPress = function(event){
idxCol=event.columnIndex;
idxRow=event.itemIndex;

lblPress.text="cellPress (" + idxCol + "," + idxRow + ")";

if(idxCol==2){
trace ("Valor E0p: "+Datos.DatLinea[idxRow].Fld04);
if(Datos.DatLinea[idxRow].Fld04==1)
myDataGrid.getColumnAt(idxCol).editable = true;
else myDataGrid.getColumnAt(idxCol).editable = false;
}else myDataGrid.getColumnAt(idxCol).editable = false;
}
myDataGrid.addEventListener("cellPress", DGLstPress);

DGLstFcOut = new Object();
DGLstFcOut.cellFocusOut = function(event){
myDataGrid.getColumnAt(idxCol).editable = false;
}
myDataGrid.addEventListener("cellFocusOut", DGLstFcOut);

DGLstFcIn = new Object();
DGLstFcIn.cellFocusIn = function(event){
idxCol=event.columnIndex;
idxRow=event.itemIndex;

if(Datos.DatLinea[idxRow].Fld04==1)
myDataGrid.getColumnAt(idxCol).editable = true;
else{
myDataGrid.getColumnAt(idxCol).editable = false;
myDataGrid.focusedCell = {columnIndex:idxCol, itemIndex:selfocus_bsc(idxRow)};
}
}
myDataGrid.addEventListener("cellFocusIn", DGLstFcIn);

DGLstEdt = new Object();
DGLstEdt.cellEdit = function(event){
lblFcOut.text="cellEdit (" + idxCol + "," + idxRow + ")";
Datos.DatLinea[idxRow].DatPrmtor=event.target.__dataProvider[idxRow].Datos;
load();
}
myDataGrid.addEventListener("cellEdit", DGLstEdt);
}
var idxCol:Number=-1;
var idxRow:Number=-1;

function selfocus_bsc(index){
var iAux=0;


for(var i=index;i<Datos.DatLinea.length;i++){
if(Datos.DatLinea[i].Fld05==1){
iAux=i;
break;
}
}
return i;
}
/**** Fin del código ****/

Por último incluir el archivo .AS en el proyecto que se haya creado.

Si todo va bien, tras ejecutar, se podrá ver que se llena el Datagrid con 5 columnas visibles y 22 filas. La segunda columna tendra, para cada fila, los texto Azul y Negro, que equivalen a la ejecución del CellRender. El color depende de una columna oculta 'E0p' con valores 1 ó 0 (1 dará Azul y 0 dará Negro). Lo mismo ocurre con la columna 4 y el color rojo y negro, dependiendo de la columna 'E0s'.

A primera vista todo parecerá haber funcionado bien. Pero por debajo del rowCount (la zona de filas no visible inicialmente), el resultado de la aplicación de color no es correcto.

Este es mi problema. Cualquier ayuda será útil.

Un saludo

[TMeister]

a ver intenta algo asi en tu cellRenderer

Código:

class EleCntDat extends mx.core.UIComponent
{
	var lblDato;
	var owner;
	var listOwner;
	var getCellIndex : Function;
	function EleCntDat ()
	{
	}
	function createChildren () : Void
	{
		lblDato = createLabel ("lblDato", 10);
		lblDato.styleName = listOwner;
		lblDato.selectable = false;
		lblDato.tabEnabled = false;
		lblDato.background = false;
		lblDato.border = false;
	}
	function size () : Void
	{
		lblDato._width = __width;
		lblDato._height = __height;
	}
	function getPreferredHeight () : Number
	{
		return owner.__height - 4;
	}
	public function setValue (suggested : String, item : Object, selected : Boolean) : Void
	{
		if (item == undefined)
		{
			if (lblDato != undefined)
			{
				lblDato.removeMovieClip ();
				delete lblDato;
			}
			return;
		}
		var index = getCellIndex ();
		var sAux = listOwner.getColumnAt (index.columnIndex).colu mnName;
		if ((sAux == "D0p") && (item.E0p == 1)) lblDato.color = 0x0000FF;
		else if ((sAux == "D0s") && (item.E0s == 1)) lblDato.color = 0xFF0000;
		lblDato.text = suggested;
	}
}

[night.noise]

Gracias. Ya he probado tu sugerencia pero no ha surtido efecto.

Tras el tiempo de análisis que llevo invertido mi impresión es la siguiente: el cellRender se aplica (por ser condicional) según un bucle de los valores de fila del rowCount. Me explico con un ejemplo: tenemos 20 filas y un rowCount de 5. En el ejemplo y con este cellRender el resultado al cargar el Datagrid podía ser el siguiente N,A,N,N,A (N-Negro, A-Azul). El setValue se ejecuta siempre y si se tracea los datos devueltos son coherentes, pero el resultado de color es el siguiente independientemente de los valores de las columnas de cada una de las filas posteriores al rowCount N,A,N,N,A , N,A,N,N,A , N,A,N,N,A , ...

Esta es mi impresión, lo cual no implica que no esté equivocada y que mis pruebas sean incorrectas

Gracias por tu tiempo

Un saludo