Flex - Control AdvancedDataGrid

Introducción

El control AdvancedDataGrid agregó múltiples funcionalidades al control DataGrid estándar para agregar funciones de visualización de datos a la aplicación Flex. Estas funciones proporcionan un mayor control de la visualización de datos, la agregación de datos y el formato de datos.

Declaración de clase

A continuación se muestra la declaración de mx.controls.AdvancedDataGrid clase -

public class AdvancedDataGrid
   extends AdvancedDataGridBaseEx

Propiedades publicas

No Señor	Descripción de propiedad
1	displayDisclosureIcon : Boolean Controla la creación y visibilidad de iconos de divulgación en el árbol de navegación.
2	displayItemsExpanded : Boolean Si es verdadero, expanda el árbol de navegación para mostrar todos los elementos.
3	firstVisibleItem : Object El elemento del proveedor de datos que corresponde al elemento que se muestra actualmente en la fila superior del control AdvancedDataGrid.
4	groupedColumns : Array Una matriz que define la jerarquía de instancias de AdvancedDataGridColumn al realizar la agrupación de columnas.
5	groupIconFunction : Function Una función de devolución de llamada proporcionada por el usuario para ejecutar en cada elemento del grupo para determinar su icono de rama en el árbol de navegación.
6	groupItemRenderer : IFactory Especifica el representador de elementos que se utiliza para mostrar los nodos de rama en el árbol de navegación que corresponden a los grupos.
7	groupLabelFunction : Function Una función de devolución de llamada para ejecutar en cada elemento para determinar su etiqueta en el árbol de navegación.
8	groupRowHeight : Number La altura de la fila agrupada, en píxeles.
9	hierarchicalCollectionView : IHierarchicalCollectionView La instancia de IHierarchicalCollectionView que usa el control.
10	itemIcons : Object Un objeto que especifica los iconos de los elementos.
11	lockedColumnCount : int [anular] El índice de la primera columna del control que se desplaza.
12	lockedRowCount : int [anular] El índice de la primera fila del control que se desplaza.
13	rendererProviders : Array Matriz de instancias de AdvancedDataGridRendererProvider.
14	selectedCells : Array Contiene una matriz de ubicaciones de celdas como índices de fila y columna.
15	treeColumn : AdvancedDataGridColumn La columna en la que se muestra el árbol.

Propiedades protegidas

No Señor	Descripción de propiedad
1	anchorColumnIndex : int = -1 El índice de columna del ancla actual.
2	caretColumnIndex : int = -1 El nombre de la columna del elemento debajo del símbolo de intercalación.
3	cellSelectionTweens : Object Una tabla hash de interpolaciones de selección.
4	highlightColumnIndex : int = -1 El índice de columna del elemento que actualmente se desplaza sobre o debajo del cursor.
5	selectedColumnIndex : int = -1 La columna de la celda seleccionada.
6	treeColumnIndex : int [solo lectura] El número de columna del árbol.
7	tween : Object El objeto de interpolación que anima las filas Los usuarios pueden agregar detectores de eventos a este objeto para recibir una notificación cuando la interpolación comience, se actualice y finalice.
8	visibleCellRenderers : Object Una tabla hash de los representadores de elementos del proveedor de datos actualmente a la vista.

Métodos públicos

No Señor	Método y descripción
1	AdvancedDataGrid() Constructor.
2	collapseAll():void Contrae todos los nodos del árbol de navegación.
3	expandAll():void Expande todos los nodos del árbol de navegación en el control.
4	expandChildrenOf(item:Object, open:Boolean):void Abre o cierra todos los nodos del árbol de navegación debajo del elemento especificado.
5	expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void Abre o cierra un nodo de rama del árbol de navegación.
6	getParentItem(item:Object):* Devuelve el elemento principal de un elemento secundario.
7	isItemOpen(item:Object):Boolean Devuelve verdadero si el nodo de rama especificado está abierto.
8	setItemIcon(item:Object, iconID:Class, iconID2:Class):void Establece el icono asociado en el árbol de navegación para el elemento.

Métodos protegidos

No Señor	Método y descripción
1	addCellSelectionData (uid:String, columnIndex:int, selectionData:AdvancedDataGridBaseSelectionData):void Agrega información de selección de celda al control, como si usara el mouse para seleccionar la celda.
2	applyCellSelectionEffect (indicator:Sprite, uid:String, columnIndex:int, itemRenderer:IListItemRenderer):void Configura el efecto para aplicar el indicador de selección.
3	applyUserStylesForItemRenderer (givenItemRenderer:IListItemRenderer):void Aplica estilos del control AdvancedDataGrid a un representador de elementos.
4	atLeastOneProperty(o:Object):Boolean Devuelve verdadero si el objeto tiene al menos una propiedad, lo que significa que el diccionario tiene al menos una clave.
5	clearCellSelectionData():void Borra la información sobre la selección de celdas.
6	clearIndicators():void [anular] Elimina toda la selección y los indicadores de resaltado y de intercalación.
7	clearSelectedCells(transition:Boolean = false):void Borra la propiedad selectedCells.
8	dragCompleteHandler(event:DragEvent):void [anular] Controlador del evento DragEvent.DRAG_COMPLETE.
9	dragDropHandler(event:DragEvent):void [anular] Controlador del evento DragEvent.DRAG_DROP.
10	drawVerticalLine (s:Sprite, colIndex:int, color:uint, x:Number):void [anular] Dibuja una línea vertical entre columnas.
11	finishKeySelection():void [override] Establece los elementos seleccionados según las propiedades caretIndex y anchorIndex.
12	initListData (item:Object, adgListData:AdvancedDataGridListData):void Inicializa un objeto AdvancedDataGridListData que utiliza el representador de elementos AdvancedDataGrid.
13	moveIndicators(uid:String, offset:int, absolute:Boolean):void [anular] Mueve los indicadores de selección de celda y fila hacia arriba o hacia abajo según el desplazamiento dado a medida que el control desplaza su pantalla.
14	removeCellSelectionData(uid:String, columnIndex:int):void Elimina la información de selección de celda del control.
15	selectCellItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean Actualiza la lista de celdas seleccionadas, asumiendo que el mouse hizo clic en el renderizador de elementos especificado y que los modificadores de teclado están en el estado especificado.
dieciséis	selectItem (item:IListItemRenderer, shiftKey:Boolean, ctrlKey:Boolean, transition:Boolean = true):Boolean [anular] Actualiza el conjunto de elementos seleccionados dado que se hizo clic con el mouse en el renderizador de elementos proporcionado y los modificadores del teclado están en el estado indicado.
17	treeNavigationHandler(event:KeyboardEvent):Boolean Controlador de navegación por teclado para el árbol de navegación.

Eventos

No Señor	Descripción del evento
1	headerDragOutside Se envía cuando el usuario arrastra una columna fuera de su grupo de columnas.
2	headerDropOutside Se envía cuando el usuario coloca una columna fuera de su grupo de columnas.
3	itemClose Se envía cuando una rama del árbol de navegación está cerrada o contraída.
4	itemOpen Se envía cuando se abre o expande una rama del árbol de navegación.
5	itemOpening Se envía cuando se inicia una operación de apertura o cierre de la rama de un árbol.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

mx.controls.AdvancedDataGridBaseEx
mx.controls.AdvancedDataGridBase
mx.controls.listClasses.AdvancedDataGridBase
mx.core.ScrollControlBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control Flex AdvancedDataGrid

Sigamos los siguientes pasos para verificar el uso del control AdvancedDataGrid en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         public var data:ArrayCollection = new ArrayCollection ([   
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
         ]);
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "dataGridPanel" title = "Using DataGrid" 
            width = "500" height = "300">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />
            </s:layout>					
            
            <mx:AdvancedDataGrid dataProvider = "{data}" id = "advancedDataGrid" >
               <mx:columns>
                  <mx:AdvancedDataGridColumn dataField = "code" width = "100" 
                     headerText = "Code" />
                  <mx:AdvancedDataGridColumn dataField = "value" width = "200" 
                     headerText = "Value" />
               </mx:columns>
            </mx:AdvancedDataGrid>
            
            <s:HGroup width = "60%">
               <s:Label text = "Code :" /> 
               <s:Label text = "{advancedDataGrid.selectedItem.code}"
                  fontWeight = "bold" />
               <s:Label text = "Value :" /> 
               <s:Label text = "{advancedDataGrid.selectedItem.value}"
                  fontWeight = "bold" />
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page