myflexscript

¿Comó hacer para cambiar el ItemRenderer en tiempo de ejecución?

Una de las ventajas de usar Flex y el UIcomponent es la propiedad Itemrenderer que tienen todos los componentes de FLEX que son derivados de la clase ListBase, e incluyen los siguientes controles: DataGrid, HorizontalList, List, Menu, TileList, y Tree.
el ComboBox es un derivado de List y por ende tambien tiene la propiedad Itemrenderer.

La propiedad ItemRenderer nos permite transformar y manipular la representación gráfica de los datos de un componente por otro componente.

Ejemplo: en el siguiente ejemplo tenemos los datos

• label: ‘ie’, path: ‘litho/ie.png’ ,fecha: ‘2008/08/09′
• label: ‘ff’, path: ‘litho/ff.png’ ,fecha: ‘2008/08/09′
• label: ‘ns’, path: ‘litho/ns.png’ ,fecha: ‘2008/08/09′

estos datos son consumidos por el componente mx:List que nos permite mostrar solamente un dato a la vez en modo lista, por defecto toma el dato de la propiedad label.
Para poder desplegar mas de un dato en la lista o anidar dentro de la lista otras representaciones gráficas del dato usamos el itemrenderer.

Aqui les comparto el sorce code

cualquier inquietud no duden en consultar

archivo principla main.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://lucasmatos.com.ar/flexcoderBlog/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
	<![CDATA[
	//author Lucas Matos d-_-b
		import mx.controls.Alert;
		import mx.controls.Image;
		import mx.collections.ArrayCollection;
		import mx.core.ClassFactory; 

		[Bindable] private var dataCombo:ArrayCollection =
		new ArrayCollection( [{ label: 'ie', path: 'litho/ie.png' ,fecha: '2008/08/09' } ,
		                     { label:  'ff', path: 'litho/ff.png' ,fecha: '2008/08/09' } ,
		                     { label:  'ns', path: 'litho/ns.png' ,fecha: '2008/08/09' } ]);  

		public function change():void{

			if(flag.selected)
			{
			lista.itemRenderer= new ClassFactory(fechas);
			}
			else
			{
			lista.itemRenderer= new ClassFactory(item);
			}

		}
	]]>
</mx:Script>
<mx:HBox width="100%" horizontalAlign="center">
	<mx:VBox width="200" horizontalAlign="center" >
	<mx:Text text="Lista que usa itemRenderer con mas de una dato"  width="200" height="50"/>
	<mx:Spacer width="100" height="50" />

		<mx:CheckBox id="flag" label="Cambiar el itemRenderer" width="200"  click="change()"/>

	<mx:List id="lista" dataProvider="{dataCombo}" width="120" height="250" itemRenderer="item"  />
	</mx:VBox>

	<mx:VBox width="200" horizontalAlign="center">
	<mx:Text text="Lista sin el itemRenderer que permite mostrar solo un dato ala vez" width="200"  height="50"/>
	<mx:RadioButton label="Label" click="listacomun.labelField='label'"/>
	<mx:RadioButton label="Path " click="listacomun.labelField='path'"/>
	<mx:RadioButton label="Fecha" click="listacomun.labelField='fecha'"/>

	<mx:List id="listacomun" dataProvider="{dataCombo}" width="120" height="250"  />
	</mx:VBox>

</mx:HBox>

</mx:Application>

archivo Item.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://lucasmatos.com.ar/flexcoderBlog/ -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="120" height="70">
		<mx:Label text="{data.label}"/>
		<mx:Image source="{data.path}" />
</mx:HBox>

archivo fechas.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://lucasmatos.com.ar/flexcoderBlog/ -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="120" height="70">
	<mx:DateField id="myText"
    	yearNavigationEnabled="true"
		dayNames="['D', 'L', 'M', 'M', 'J', 'V', 'S']"
		monthNames="['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo','Junio',
					 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Novimbre', 'Dicimbre']"
        minYear="2006"
		formatString="YYYY-MM-DD"
		text="{data.fecha}"  	 />
</mx:HBox>