destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

Componente DataGrid I

, 30/06/2005 00:00:00

Vamos a ver un poco la funcionalidad de este componente. DataGrid permite presentar datos de forma tabular. Se suele utilizar para recibir datos desde otros componentes, documentos xml o por Flash Remoting.

Una vez tenemos una instancia sobre el escenario, quizá el primer paso sea decirle a Flash cuantas columnas deseamos mostrar. Podemos hacerlo asignando a una array con el nombre de las columnas a la propiedad ComlumnNames del Datagrid. Ejemplo:

1.- Desde el panel de componentes arrastramos una instancia del componente DataGrid al escenario y le asignamos como nombre de instancia "MiDataGrid"
2.- A un fotograma clave le asignamos el siguiente código:

MiDataGrid.columnNames = ["Nombre", "Profesion", "Edad"]; 

Cuando deseemos obtener un mayor control sobre las columnas y los datos que mostramos, es mejor hacerlo de la siguiente forma:

//importamos el objeto DataGridColumn de los
//controles que manejan el DataGrid
import mx.controls.gridclasses.DataGridColumn;

Ahora ya podemos crear una nueva instancia de DataGridColumn. Necesitamos pasar como parámetro el nombre de la columna.

var ColNombre = new DataGridColumn("Nombre");

Una vez hemos definido la instancia del objeto DataGridColumn podemos añadir columnas con addColumn() o addColumnAt(). El método addColumn() requiere que le pasemos el nombre de la nueva columna. Así el ejemplo anterior, utilizando este método sería:

1.- Desde el panel de componentes arrastramos una instancia del componente DataGrid al escenario y le asignamos como nombre de instancia "MiDataGrid"
2.- A un fotograma clave le asignamos el siguiente código:

import mx.controls.gridclasses.DataGridColumn;
var ColNombre = new DataGridColumn("Nombre");
var ColProfesion = new DataGridColumn("Profesion");
var ColEdad = new DataGridColumn("Edad");
MiDataGrid.addColumn(ColNombre);
MiDataGrid.addColumn(ColProfesion);
MiDataGrid.addColumn(ColEdad);

También podemos utilizar el método addColumnAt(), que requiere que le pasemos además un índice. Este método inserta la columna en la posición que le indiquemos. La primera columna tiene como indice el cero. Por ejemplo, para insertar una columna "Apellidos" después del "Nombre", añadiríamos las siguientes líneas al código que ya teníamos.

var ColApellidos = new DataGridColumn("Apellidos");
MiDataGrid.addColumnAt(1,ColApellidos);

Bien, el siguiente paso sería añadir datos. Hay varios métodos para añadir datos. Podemos añadir filas de una en una con los métodos addItem() y addItemAt().

El método addItem() inserta una nueva fila al final de los datos que hasta ese momento tengamos. Por ejemeplo:

MiDataGrid.addItem({Nombre:"Juan", Apellidos:"Perez Garcia", Profesion:"Comercial", Edad:"23"});

El método addItemAt() trabaja básicamente del mismo modo, pero necesitamos añadir el índice para especificar la posición donde deseamos insertar la fila.

También podemos insertar los datos de una manera utilizando un DataProvider, de manera similar a como se hace en el componente ComboBox. Un ejemplo completo podría ser:

import mx.controls.gridclasses.DataGridColumn;
var ColNombre = new DataGridColumn("Nombre");
var ColEdad = new DataGridColumn("Edad");
MiDataGrid.addColumn(ColNombre);
MiDataGrid.addColumn(ColEdad);
var MisFilas = [{Nombre:"Juan",Edad:"23"}, {Nombre:"Luis",Edad:"25"}, {Nombre:"Alberto",Edad:"33"}];
MiDataGrid.dataProvider = MisFilas;

Para variar el tamaño en píxeles de las columnas se hace con la propiedad DataGridColumn.width, cuya sintaxis es MiDataGrid.getColumnAt(indice).width. Por ejemplo:

MiDataGrid.getColumnAt(0).width = 100;
Páginas: 1
comentarios