Comunidad de diseño web y desarrollo en internet

Mostrar DataTips de ComboBox en Flex

Los que hemos trabajado en Flex, ya sea con Listas o ComboBox hemos visto que algunas veces las etiquetas de cada item rebasan el tamaño del control provocando que esta no se vea por completo, para control List podemos resolver eso fácilmente poniendo en true la propiedad showDataTips, sin embargo para el ComboBox no hay algo tan directo como esto.

La solución es crear un dropdownFactory, con esto creamos una nueva instancia del control List (pues el control que aparece en el drop down del ComboBox es un List) y podrémos modificar las propiedades que necesitemos, para este caso, que muestre dataTips y especificar quien será el dataTip o bien, crear una función para que sea la que despliegue la información.

El código en AS3 quedaría así:

Código :

private var ddf:ClassFactory
private var dp_ac:ArrayCollection = new ArrayCollection([
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"},
   {etiqueta: "Texto un poco laaaaaargo"}
]);

// donde init se dispara en el creationComplete del .mxml
private function init():void
{
   ddf = new ClassFactory(List);
   var propiedades:Object = {
      showDataTips: true,
      dataTipField: "etiqueta"
   }
   ddf.properties = propiedades;
   var cb:ComboBox = new ComboBox();
   cb.dropdownFactory = ddf;
   cb.dataProvider = dp_ac;
   cb.width = 75;
   cb.labelField = "etiqueta";
   this.addChild(cb);
}


En caso de que el ComboBox se haga desde el MXML el código sería así (eliminando desde var cb:ComboBox = new ComboBox(); hasta this.addChild(cb); del código anterior):

Código :

<mx:ComboBox id="cb" dataProvider="{dp_ac}" dropdownFactory="{ddf}" width="75" labelField="etiqueta"/>

Y ya al momento de ejecución se vería como la siguiente imagen:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate