Flex: Clase datagridColumnSelector
Esta es una clase que hice para Flex para mostrar y ocultar las columnas de cualquier instancia de DataGrid sin ensuciarse con mucho codigo.
Menu contextual del DataGrid
Se puede implementar en solo una linea de codigo:
1 |
new datagridColumnSelector(datagridInstance, [campoignorado1]); |
El primer argumento es obligatorio y debe ser una instancia de DataGrid. El segundo argumento es opcional y debe recibir un Array con los nombres de las columnas a ignorar.
Cambiando algunas propiedades por defecto:
1 2 3 4 |
datagridColumnSelector.label_hide = "Ocultar"; datagridColumnSelector.label_show = "Mostrar"; var selector:datagridColumnSelector = new datagridColumnSelector(data_dg); selector.hidden = ["col3"]; |
En el siguiente ejemplo la columna 4 y 5 estan ocultas por defecto. Tambien se decide ignorar la columna 3 para que el usuario no pueda ocultar todas las columnas.
Nota que el valor del atributo headerText en cada DataGridColumn es usado en el menu contextual para que el usuario pueda identificar la columna.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <mx:Application layout="vertical" creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #E7E7E7]" paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" horizontalAlign="left" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import net.danielzegarra.utils.datagridColumnSelector; protected function init():void{ new datagridColumnSelector(data_dg, ["col3"]); } ]]> </mx:Script> <mx:Label text="Haga un clic secundario sobre el DataGrid para mostrar u ocultar columnas."/> <mx:DataGrid id="data_dg" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Columna 1" dataField="col1"/> <mx:DataGridColumn headerText="Columna 2" dataField="col2"/> <mx:DataGridColumn headerText="Columna 3" dataField="col3"/> <mx:DataGridColumn headerText="Columna 4" dataField="col4" visible="false"/> <mx:DataGridColumn headerText="Columna 5" dataField="col5" visible="false"/> </mx:columns> </mx:DataGrid> </mx:Application> |
Y el resultado es el siguiente:
Ver la fuente | [download id=»8″]
Nota: Funciona tambien con Air aunque es preferible usar las clases nativas de Adobe Air.
Estimado Daniel
Excelente dato !!!
Tenias justo el tip que necesitaba
Te felicito por tu página
Saludos Cordiales
Desde Chile
Roberto Pizarro
Me gustó tu aplicación de kopernik, me gustaría saber como haces para que la aplicación se ajuste al tamaño de la resolución del monitor o cuando le pones maximizar o restaurar el browser.
Saludos
Hola Pablo. Utilicé una librería llamada FlexLib. Puedes encontrar esta librería en su repositorio de Github.