En este tip explicaré cómo colorear una fila dentro de un componente dataGrid en Flex.
Primero que todo hago una clase llamada myDataGrid que extiende de mx.controls.Datagrid y la situo en la misma carpeta del proyecto Flex, (la puedes poner donde quieras y después especificar en el package de la clase la ruta.)
MyDataGrid.as
Código :
package {
import mx.controls.DataGrid; public class myDataGrid extends DataGrid {
} }
Dentro de ella sobre-escribimos el método drawRowBackground que no es mas que el método en el datagrid que se encarga de pintar el fondo de la celda..
public class myDataGrid extends DataGrid { override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number,height:Number,color:uint,dataIndex:int):void { var dp:ArrayCollection = dataProvider as ArrayCollection; var item:Object;
var dp:ArrayCollection = dataProvider as ArrayCollection; --> Creamos un arrayCollection dp que le pasaremos el contenido del dataProvider del Grid en cuestión [el mismo.]
var item:Object; --> Una variable objet para almacenar temporalmente el contenido de la fila
if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex); --> Aqui le añado el contenido de la fila actual a item SI el dataIndex [indice de la fila actual] es menor que el largo del arrayCollection dp que es la copia del dataProvider. (el # de filas de un datagrid no es = al numero de elementos del dataProvider!)
if( item != null && item.price < 20 ) color = 0xFF8800; --> aquí digo que si ítem que es el que contiene los valores de la fila actual no es null y ademas el campo price <20 la variable color sera un naranja claro..
else color = 0xFFFFFF; --> Si no la variable color sera blanca...
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex); --> aquí invocamos al metodo drawRowBackground de la superclase... (dataGrid)... dentro de los parámetros que se le pasa..
Bien ahora abrimos nuestro proyecto Flex. y creamos el siguiente script que nos llena un arrayCollection provisional ..
Código :
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var f:ArrayCollection = new ArrayCollection();
function a() { var h:Object = new Object(); for(var i:int=0;i<10;i++) { h = {}; h["products"] = "Judias_"+i.toString(); h["price"] = 10*i; f.addItem(h); } } ]]> </mx:Script>
chap para la columna usa la propiedad backgroundColor en el elemento columna de un datagrid...
gracias a todos.. Por:Joris Van Spilbergen_blog
Hice este ejemplo y me da el siguiente error Could not resolve
E el archivo .mxml del application definie de la siguiente manera xmlns:component="ar.com.view.componentes.*" y al archivos .as EstadoComercioDataGrid
esta es <component:EstadoComercioDataGrid dataProvider="{ estados }" > <component:columns> <mx:DataGridColumn headerText="Estado" dataField="descripcion"/> <mx:DataGridColumn headerText="Fecha de modificación" dataField="fechaInicio"/> </component:columns> </component:EstadoComercioDataGrid>
El error que tira el server es el siquiente:
<component:EstadoComercioDataGrid> to a component implementation
Cuales el problema ?? Por:Carolina_blog
Hola, al principio probe el Script y no me funciono lanzando algunos errores, probando lo resolvi pondre el codigo para que vean los cambios que hise:
Modifique esta funcion un poco.
Código :
public function a():void{ var h:Object = new Object;
