20 ListControlsAvanzados

Flex 4
Controles de Lista Avanzados

Combo y DDL
• Son controles de Lista muy conocidos que muestran
los datos en una única columna por defecto
• Las versiones Spark para estos componentes
soportan la propiedad layout que permite mostrar
los elementos de lista horizontal o en celdas
• Tb soportan la propiedad prompt
– el valor de esta propiedad es un String que muestra al
usuario si han seleccionado algún valor del control
Solución – propiedad prompt -
DropDownDemo
• <?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”
• xmlns:vo=”vo.*”>
• <s:layout>
• <s:VerticalLayout horizontalAlign=”center” paddingTop=”20”/>
• </s:layout>
• <fx:Declarations>
• <s:ArrayList id=”stateData”>
• <vo:StateVO>
• <vo:state>CA</vo:state>
• <vo:capitol>Sacramento</vo:capitol>
• </vo:StateVO>
• <vo:StateVO>
• <vo:state>OR</vo:state>
• <vo:capitol>Salem</vo:capitol>
• </vo:StateVO>
• <vo:StateVO>
• <vo:state>WA</vo:state>
• <vo:capitol>Olympia</vo:capitol>
• </vo:StateVO>
• </s:ArrayList>
• </fx:Declarations>
• <s:VGroup width=”300” gap=”20”>
• <s:Label text=”DropDownList Control” styleName=”label”
• fontSize=”14” fontWeight=”bold”/>
• <s:DropDownList
• id=”dropdownState”
• prompt=”Select a State”
• dataProvider=”{stateData}”
• labelField=”state” width=”124”/>
• <s:Label text=”selectedIndex: {dropdownState.selectedIndex}”/>
• <s:Label text=”selectedItem: {dropdownState.selectedItem.capitol},
• {dropdownState.selectedItem.state}”/>
• </s:VGroup>
• </s:Application>
control ComboBox
• Crear una aplicación con un Spark ComboBox
cuyo dataProvider tome un ArrayList que
contenga valores String
• Las Labels utilizan binding expressions para
mostrar el texto del control utilizando las
propiedades selectedIndex y selectedItem
Solución - ComboBoxDemo
• <?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"
• xmlns:vo="vo.*" width="495" height="421">
• <s:layout>
• <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
• </s:layout>
• <s:ArrayList id="sizeData">
• <fx:String>Small</fx:String>
• <fx:String>Medium</fx:String>
• <fx:String>Large</fx:String>
• </s:ArrayList>
• <s:VGroup>
• <s:Label text="ComboBox Control" styleName="label"
• fontSize="14" fontWeight="bold"/>
• <s:ComboBox id="cbSize"
• dataProvider="{sizeData}"/>
• <mx:Spacer height="20"/>
• <s:Label text="selectedIndex: {cbSize.selectedIndex}"/>
• <s:Label text="selectedItem: {cbSize.selectedItem}"/>
• </s:VGroup>
Spark ButtonBar control
• muestra un conjunto de botones basados en
un objeto dataProvier que implementa el
interfaz ILIst (habitualmente un ViewStack, un
ArrayList o un ArrayCollection).
• Soporta las propiedades de las Listas como
selectedItem….
• Tb tiene las propiedades LabelField y
labelFunction
Ejemplo
• Crear una aplicación que genera un ButtonBar
con tres botones
• Cada botón tiene una label generada por el
método getState
Solución - buttonbarDemo
• xmlns:vo="vo.*">
• <s:layout>
• </s:layout>
• <fx:Script>
• <![CDATA[
• import spark.events.IndexChangeEvent;
•
• import vo.StateVO;
• protected function getStateLabel(item:StateVO):String
• {
• return item.capitol + ", " + item.state;
• }
• protected function buttons_changeHandler(event:IndexChangeEvent):void
• {
• var stateObj:StateVO = event.target.selectedItem as StateVO;
• out.text="You selected " + stateObj.capitol + ", " +
• stateObj.state;
• }
• ]]>
• </fx:Script>
• <s:ArrayList id="stateData">
• <vo:StateVO>
• <vo:state>CA</vo:state>
• <vo:capitol>Sacramento</vo:capitol>
• </vo:StateVO>
• <vo:StateVO>
• <vo:state>OR</vo:state>
• <vo:capitol>Salem</vo:capitol>
• </vo:StateVO>
• <vo:StateVO>
• <vo:state>WA</vo:state>
• <vo:capitol>Olympia</vo:capitol>
• </vo:StateVO>
• </s:ArrayList>
• <s:Label text="ButtonBar Control" fontSize="14" fontWeight="bold"/>
• <s:ButtonBar id="buttons"
• dataProvider="{stateData}"
• labelFunction="getStateLabel"
• change="buttons_changeHandler(event)"/>
• <s:Label id="out"/>
• El control ButtonBat soporta atajos de tecla y
permite navegar y seleccionar los botones.
– pulsamos flechas y espaciador
• El control ButtonBat tb se puede usar con
ViewStack para implementar un interfaz de
navegación simple.
– Podemos enlazar el ViewStack al control Button
Bat y generamos con su dataProvider los botones
automáticamente
control DataGrid
Ejemplo
• Aplicación que utiliza datos incrustados con
Model del fichero contact.xml y se envuelven
con un ArrayList
• Los datos se pasan al DG con una binding
expression
Solución - DataGridDefaultColumns
• <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”>
• <fx:Model id=”contactData” source=”data/contacts.xml”/>
• <s:ArrayList id=”contactAC” source=”{contactData.row}”/>
• <mx:DataGrid id=”contactGrid” dataProvider=”{contactAC}”
• horizontalCenter=”0” top=”20”/>
Mostrar label personalizadas en las celdas
del DataGrid
• Utilizamos la propiedad LabelFunction y se
aplica un formato a esta columna utilizando
una función del tipo
• private function
getFormattedLabel(item:Object,
• column:DataGridColumn):String
• Podemos aplicar formatos
• Por ejemplo el formato de un número de tfno con parentesis en
el prefijo
– se puede hacer de varias maneras
• utilizando formateadores
– <mx:PhoneFormatter id=”formatter”/>
• creando una función personalizada para dar formato
• private function getPhoneLabel(item:Object,

• {
• }
• El PhoneFormatter requiere un valor que
pueda ser pasado como un número.
• Podemos utilizar una expresión regular y
reemplazar todas las instancias
• var pattern:RegExp = /-/g;

• var phoneValue:String =
item.phone.replace(pattern, “”);
• Para finalizar, devolvemos el valor formateado
pasando la expresión resultante al
PhoneFormatter con el método format()
• return formatter.format(phoneValue);
Ejemplo
• Alimentamos un DG pero aplicamos un
formateador para cambiar el formato de los
datos en algunas columnas utilizando la
propiedad labelFunction
Solución - DataGridFormatLabels
• xmlns:mx="library://ns.adobe.com/flex/mx">
• <fx:Script>
• <![CDATA[
• import mx.controls.dataGridClasses.DataGridColumn;
• private function getPhoneLabel(
• item:Object, column:DataGridColumn):String
• {
• /*The regular expression consists of a hyphen
• (the value being replaced) and the /g global flag
• to replace ALL instances of the hyphen
• */
• var pattern:RegExp = /-/g;
• var phoneValue:String = item.phone.replace(pattern, "");
• return formatter.format(phoneValue);
• }
• ]]>
• </fx:Script>
• <fx:Model id="contactData" source="data/contacts.xml"/>
• <s:ArrayList id="contactAC" source="{contactData.row}"/>
• <mx:PhoneFormatter id="formatter"/>
• <mx:DataGrid id="contactGrid" dataProvider="{contactAC}"
• horizontalCenter="0" top="20">
• <mx:columns>
• <mx:DataGridColumn dataField="firstname" headerText="First Name"
• width="100"/>
• <mx:DataGridColumn dataField="lastname" headerText="Last Name"
• width="100"/>
• <mx:DataGridColumn dataField="email" headerText="Email Address"
• width="250"/>
• <mx:DataGridColumn dataField="phone" headerText="Phone Number"
• width="150" labelFunction="getPhoneLabel"/>
• </mx:columns>
• </mx:DataGrid>
Item Renderes y Editores
• Muchos controles soportan la personalización
con controles item renderer y editores
• En el control MX DataGrid, un item renderer o
un editor se usa en una columna específica
– propiedades itemRenderer y itemEditor se
implementan en el componente DataGridColumn
• Los item renderer y editor se pueden declarar en
DataGridColumn de tres maneras:
– Drop-in renderers
• son componentes visuales que podemos asignar a un control lista sin
cambios en la propiedad renderer del componente o en estilos
– Inline renderers.
• son componentes que definimos en la declaración MXML del control list
– Component renderers.
• son componentes visuales separados que definimos como componentes
MXML o clases AS y asignamos al control list usando la propiedad
itemRenderer
dataChange event
• Tenemos un componente DG que muestra información de contacto
del fichero contacts.xml
• En la primera columna el DG, el nombre y apellido del contacto se
muestra unido concatenando strings.
• Lo podemos hacer muy fácil con una función formateadora de label
• private function getNameLabel(item:Object,

• {
• return item.firstname + “ “ + item.lastname;
• }
• En la segunda columna, el DG muestra la
dirección completa del contacto, formateada
como un control de Texto usando etiquetas
HTML con negrita y otros formatos
• Podemos usar el evento dataChange para
actualizar el display del componente
personalizado en runtime.
• El componente personalizado se extiende el
componente MX Text
• Cuando el evento dataChange del
componente se dispara, responde
actualizando su propia propiedad htmlText
con los nuevos valores del objeto
Solución - AddressRenderer
• <mx:Text xmlns:fx=”http://ns.adobe.com/mxml/2009”
• xmlns:mx=”library://ns.adobe.com/flex/mx”
• dataChange=”updateHTML()”>
• <fx:Script>
• <![CDATA[
• private function updateHTML():void
• {
• htmlText = data.city + “, “ + data.state + “\n” +
• “<b>Phone:</b> “ + data.phone + “\n” +
• “<b>Email:</b> “ + data.email + “\n”;
• }
• ]]>
• </fx:Script>
• </mx:Text>
Ejemplo
• En la aplicación usamos el componente
personalizado como un item rendere para
mostrar la info de dirección completa en la
segunda columna del DG.
Solución - DataGridCustomRenderer
• <s:layout>
• </s:layout>
• <fx:Script>
• <![CDATA[
• import mx.controls.dataGridClasses.DataGridColumn;
• private function getNameLabel(
• item:Object, column:DataGridColumn):String
• {
• return item.firstname + " " + item.lastname;
• }
• ]]>
• </fx:Script>
• <s:ArrayList id="contactAC" source="{contactData.row}"/>
• <mx:DataGrid id="contactGrid" dataProvider="{contactAC}"
• variableRowHeight="true" rowCount="5">
• <mx:columns>
• <mx:DataGridColumn dataField="firstname" headerText="Full Name"
• width="150" labelFunction="getNameLabel"
• fontWeight="bold" fontSize="14"/>
• <mx:DataGridColumn headerText="Address Info" width="350"
• itemRenderer="renderers.SparkAddressRenderer"/>
• </mx:columns>
• </mx:DataGrid>
Spark item renderers
• Flex SDK 4 incluye componentes
MXDataGridItemRenderer y
• MXAdvancedDataGridItemRenderer.
• Estos componentes basados en Spark son
diseñados para ser usados como elementos raíz
que permitan personalizar item renderes usado
por los controles DG y ADG
• Permiten usar gráficos vectoriales y avanzado
texto renderizado.
• Para crear un nuevo item rendrer para un DG:
– boton derecho en el paquete en donde los vamos
a crear
– new – mxml item renderer
– seleccionamos la plantilla item renderer para
mxDG
– Finish y se crea el nuevo componente
Ejemplo
• Item Renderer Spark para un DGColumn que
incorpore un fondo con degradado radial
definido con un gráfico FXG y label Spark para
mostrar el texto
Solución - SparkAddressRenderer
• <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
• focusEnabled="true">
• <s:Rect width="100%" height="100%">
• <s:fill>
• <s:RadialGradient>
• <s:entries>
• <s:GradientEntry color="#CCCCCC"/>
• <s:GradientEntry color="#EEEEEE"/>
• </s:entries>
• </s:RadialGradient>
• </s:fill>
• </s:Rect>
• <s:VGroup top="5" bottom="5" right="10" left="10">
• <s:Label text="{data.streetaddress}"/>
• <s:Label text="{data.city}, {data.state}"/>
• <s:Label fontWeight="bold" text="{data.phone}"/>
• </s:VGroup>
• </s:MXDataGridItemRenderer>
• Mostramos el componente en un aplicación
como en el caso anterior
item editors
• como un item renderer, un item editor es un
componente personalizado que muestra una
etiqueta en la celda del DGColumn
• Un item editor siempre es un control interactivo
que permite al usuario hacer cambios en los
datos que representa
• Igual que con item renderes, podemos declarar
un item editor usando drop-in, en línea y con
un componente
• Para usar item editor, el DG debe tener la
propiedad editable en true
• Así, el DG muestra automáticamente un item
editor que es un TextInput
• Ejemplo con DG editable pero las columnas de
fist y lastname son no editables.
• Sólo la columna del tfno podría ser cambiada
por el usuario
• <mx:DataGrid id=”contactGrid” dataProvider=”{contactAC}”
• editable=”true” selectable=”false”>
• <mx:columns>
• <mx:DataGridColumn dataField=”firstname” headerText=”First Name”
• width=”100” editable=”false”/>
• <mx:DataGridColumn dataField=”lastname” headerText=”Last Name”
• width=”100” editable=”false”/>
• <mx:DataGridColumn dataField=”phone” headerText=”Phone”
• width=”100”/>
• </mx:columns>
• </mx:DataGrid>
drop-in editors
• Podemos utilizar los siguients componentes
como item editor
• Button
• CheckBox
• DateField
• NumericStepper
• TextArea
• TextInput
• Para declarar un editor en un DGColumn, asignamos el
componente al componente item Editor del componente
DGColumn
• Asignamos el componente con su nombre completo de
clase incluído el paquete
• <mx:DataGridColumn dataField=”selected”
• itemEditor=”mx.controls.CheckBox”
• ... remainder of declaration ...
• />
itemEditor y propiedad editorDataField
• Tb se puede hacer así:
• itemEditor=”mx.controls.CheckBox”
• editorDataField=”selected”
• headerText=”” width=”50”/>
rendererIsEditor property
• Tb se puede hacer así
• itemRenderer=”mx.controls.CheckBox”
• rendererIsEditor=”true”
• editorDataField=”selected”
• headerText=”” width=”50”/>
Ejemplo
• Suamos un itemRenderer en el primer
DataGrid que ponemos rendererIsEditor como
true
• El renderer es un componente drop-in basado
en mx.controls.CheckBox
• cuando la aplicación arranca, llamamos al
método initApp() que alimenta el DG con un
ArrayList
Solución - DataGridDropinEditor
• creationComplete="app_creationCompleteHandler(event)">
• <s:layout>
• </s:layout>
• <fx:Script>
• <![CDATA[
• import mx.events.FlexEvent;
• import mx.collections.ArrayList;
• [Bindable]
• protected var selectedData:ArrayList = new ArrayList();
• protected function app_creationCompleteHandler(event:FlexEvent):void
• {
• //Add a selected property to each data object on startup
• for (var i:int=0;i < collection.length; i++)
• {
• var contact:Object = collection.getItemAt(i);
• contact.selected=false;
• }
• }
• protected function button1_clickHandler(event:MouseEvent):void
• {
• selectedData = new ArrayList();
• for (var i:Number=0; i<collection.length; i++)
• {
• if (collection.getItemAt(i).selected)
• {
• selectedData.addItem(collection.getItemAt(i));
• }
• }
• }
• ]]>
• </fx:Script>
• <s:ArrayList id="collection" source="{contactData.row}"/>
• <s:HGroup>
• <s:Panel title="Available Data">
• <mx:DataGrid id="contactGrid" dataProvider="{collection}"
• editable="true" selectable="false">
• <mx:columns>
• <mx:DataGridColumn dataField="selected" itemRenderer="mx.controls.CheckBox"
• rendererIsEditor="true" editorDataField="selected"
• width="20" headerText=""/>
• <mx:DataGridColumn dataField="firstname" headerText="First Name"
• width="100" editable="false"/>
• <mx:DataGridColumn dataField="lastname" headerText="Last Name"
• width="100" editable="false"/>
• </mx:columns>
• </mx:DataGrid>
• </s:Panel>
• <s:Panel title="Selected Data">
• <mx:DataGrid id="selectedGrid" dataProvider="{selectedData}">
• <mx:columns>
• <mx:DataGridColumn dataField="firstname" headerText="First Name"/>
• <mx:DataGridColumn dataField="lastname" headerText="Last Name"/>
• </mx:columns>
• </mx:DataGrid>
• </s:Panel>
• </s:HGroup>
• <s:Button label="Show Selected" click="button1_clickHandler(event)"/>
HorizontalList and TileList controls
• Comparten muchas características con DG
– evento change notifica que el usuario ha
seleccionado un dato
– propiedad selectedItem devuelve una referencia al
elemento seleccionado
– propiedad allowMultipleSelection permite
seleccionar varios elementos con Ctrl
– si existe el scroll, los datos son reutilizados y
rellenan nuevos datos
• La diferencia entre estos controles es el layout
– HorizontalList muestra sus celdas en una única fila
– TileList las muestra como una rejilla
Ejemplo
• Aplicación que usa el control TileList y un
renderer para mostrar el contenido de un
fichero XML que se refiere a ficheros de imagen
almacenados en una carpeta del proyecto
• El componente renderer usa la propiedad slide
de cada elemento XML para presentar una
imagen
• Todo lo envolvemos en un contenedor VBox
Solución - MXTileList
• <s:layout>
• </s:layout>
• <fx:Model id="slideModel" source="data/slideshow.xml"/>
• <s:ArrayCollection id="slideAC" source="{slideModel.slide}"/>
• <s:Panel title="My Photos" height="430" width="525">
• <s:layout>
• <s:VerticalLayout
• paddingLeft="10" paddingRight="10"
• paddingTop="10" paddingBottom="10"/>
• </s:layout>
• <mx:TileList
• id="slideList" dataProvider="{slideAC}"
• width="100%" height="100%"
• rowHeight="125" columnWidth="120">
• <mx:itemRenderer>
• <fx:Component>
• <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
• verticalAlign="middle" horizontalAlign="center">
• <mx:Image source="assets/thumbs/{data.source}"/>
• <mx:Label text="{data.caption}"/>
• </mx:VBox>
• </fx:Component>
• </mx:itemRenderer>
• </mx:TileList>
• </s:Panel>
• <s:Panel title="Selected Photo" width="372" height="320">
• <s:layout>
• paddingTop="10" paddingBottom="10"
• horizontalAlign="center"/>
• </s:layout>
• <mx:Image source="assets/{slideList.selectedItem.source}"/>
• <s:Label text="{slideList.selectedItem.caption}"
• </s:Panel>
Ejemplo
• El control HorizontalList utiliza la misma
arquitectura, permitiendo usar un scroll
• el evento change guarda el selectedItem
actual en un Objeto bindable
• Cuando el elemento es selected, el
contenedor Vbox en la parte inferior de la
aplicación hace visible la imagen
Solución - HorizontalListDemo
• <fx:Script>
• <![CDATA[
• import mx.events.ListEvent;
•
• protected function slideList_changeHandler(event:ListEvent):void
• {
• currentImage=event.target.selectedItem;
• detailPanel.visible=true;
• }
• ]]>
• </fx:Script>
• <s:layout>
• </s:layout>
• <fx:Object id="currentImage"/>
• <s:Panel title="My Photos" width="80%">
• <s:layout>
• </s:layout>
• <mx:HorizontalList
• width="100%" height="125" rowHeight="125" columnWidth="120"
• change="slideList_changeHandler(event)">
• <mx:itemRenderer>
• <fx:Component>
• <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
• verticalAlign="middle" horizontalAlign="center">
• <mx:Label text="{data.caption}"/>
• </mx:VBox>
• </fx:Component>
• </mx:itemRenderer>
• </mx:HorizontalList>
• </s:Panel>
• <mx:Spacer height="50"/>
• <s:Panel id="detailPanel" title="Selected Photo"
• width="372" height="320" visible="false">
• <s:layout>
• </s:layout>
• <mx:Image source="assets/{currentImage.source}"/>
• <s:Label text="{currentImage.caption}"
• </s:Panel>
Ejemplo
• la versión Spark del control List soporta la
propiedad layout que puede ser establecida
como una instancia de HorizontalLayout o
TileLayout.
• Usamos itemRenderer como la clase base de
sus item renderes personalizados
Solución - SparkTileList
• <s:layout>
• </s:layout>
• <s:Panel title="My Photos" height="430" width="550">
• <s:layout>
• </s:layout>
• <s:List
• width="100%" height="100%" >
• <s:layout>
• <s:TileLayout rowHeight="125" columnWidth="120"/>
• </s:layout>
• <s:itemRenderer>
• <fx:Component>
• <s:ItemRenderer>
• <s:layout>
• <s:VerticalLayout horizontalAlign="center"/>
• </s:layout>
• <s:Label text="{data.caption}"/>
• </s:ItemRenderer>
• </fx:Component>
• </s:itemRenderer>
• </s:List>
• </s:Panel>
• <s:Panel title="Selected Photo" width="372" height="320">
• <s:layout>
• </s:layout>
• <mx:Image source="assets/{slideList.selectedItem.source}"/>
• <s:Label text="{slideList.selectedItem.caption}"
• </s:Panel>
AdvancedDataGrid Control
• El ADG es una versión extendida del control DG que
añade características como:
– ordenar por multiples columnas

– estilos basados en fila y columna
– mostrar datos jerárquicos con un componente Tree
incrustado
– Agrupamiento dinámico
– Agrupar por varias columnas bajo un único título
– item renderers multicolumnas
mostrar datos jerarquicos
• Como DG, el data provider típico del ADG es
un ArrayCollection
• Para usar la característica de mostrar datos
jeráquicos, los objetos deben estar incluídos al
menos en una propiedad grouping
Ejemplo
• var employeeAC:ArrayCollection = new ArrayCollection();
• employeeAC.source =
• [{department:”Shipping”,
• children: [
• {firstname:”Kevin”, lastname:”Mount”},
• {firstname:”Robert”, lastname:”Lombardi”}]},
• {department:”Marketing”, children: [
• {firstname:”Brad”, lastname:”Lang”},
• {firstname:”James”, lastname:”Jaeger”}]}
• ];
• Los datos están estructurados como un Array
que contiene múltiples instancias de Objetos
escritas en AS.
• Cada objeto contiene una propiedad
department diseñada como campo de
agrupamiento y un Array llamado children que
contiene datos adicionales.
• El ADG maneja datos basados en XML
intuitivamente
• Los nodos hijos XML son renderizados como
nodos del componente Tree
Ejemplo
• Aplicación que utiliza datos jerárquicos para
mostrarlos en un ADG agrupados
Solución - AdvDataGridDemo
• creationComplete="initData()">
• <s:layout>
• </s:layout>
• <fx:Script>
• <![CDATA[
• import mx.collections.ArrayCollection;
• [Bindable]
• private var employeeAC:ArrayCollection = new ArrayCollection();
•
• private function initData():void
• {
• employeeAC.source = [
• {department:"Shipping",
• children: [{firstname:"Kevin", lastname:"Mount"},
• {firstname:"Robert", lastname:"Lombardi"}]},
• {department:"Marketing",
• children: [{firstname:"Brad", lastname:"Lang"},
• {firstname:"James", lastname:"Jaeger"}]}
• ];
• }
• ]]>
• </fx:Script>
• <mx:AdvancedDataGrid id="employeeGrid">
• <mx:dataProvider>
• <mx:HierarchicalData source="{employeeAC}"/>
• </mx:dataProvider>
• <mx:columns>
• <mx:AdvancedDataGridColumn dataField="department"
• headerText="Department" fontWeight="bold"/>
• <mx:AdvancedDataGridColumn dataField="firstname"
• headerText="First Name"/>
• <mx:AdvancedDataGridColumn dataField="lastname"
• headerText="Last Name"/>
• </mx:columns>
• </mx:AdvancedDataGrid>
Agrupando datos
• <mx:GroupingCollection2 id=”gc”
source=”{dataCollection}”>
• <mx:grouping>
• <mx:Grouping>
• <mx:GroupingField name=”department”/>
• </mx:Grouping>
• </mx:grouping>
• </mx:GroupingCollection2>
Ejemplo
• Datos agrupados de un fichero XML
Solución - AdvDataGridFlatData
• <s:layout>
• </s:layout>
• <fx:Model id="empModel" source="data/employees.xml"/>
• <s:ArrayCollection id="employeeAC" source="{empModel.row}"/>
• <mx:AdvancedDataGrid id="employeeGrid" initialize="gc.refresh()">
• <mx:dataProvider>
• <mx:GroupingCollection2 id="gc" source="{employeeAC}">
• <mx:grouping>
• <mx:Grouping>
• <mx:GroupingField name="department"/>
• </mx:Grouping>
• </mx:grouping>
• </mx:GroupingCollection2>
• </mx:dataProvider>
• <mx:columns>
• <mx:AdvancedDataGridColumn dataField="department"
• headerText="Department" fontWeight="bold"/>
• <mx:AdvancedDataGridColumn dataField="firstname"
• headerText="First Name"/>
• <mx:AdvancedDataGridColumn dataField="lastname"
• headerText="Last Name"/>
• </mx:columns>
• </mx:AdvancedDataGrid>

20 ListControlsAvanzados

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

20 ListControlsAvanzados

Cargado por

Copyright:

Formatos disponibles

Flex 4

Controles de Lista Avanzados

• private function getPhoneLabel(item:Object,

• var pattern:RegExp = /-/g;

• private function getNameLabel(item:Object,

• Tb se puede hacer así:

– ordenar por multiples columnas

También podría gustarte