Flex: Renderer personalizado de elementos para los controles Combobox trunca el texto

actionscript mxml

Question

Implementé un renderizador de elementos personalizado que estoy usando con un combobox en un proyecto flexible en el que estoy trabajando. Muestra e icono y algo de texto para cada elemento. El único problema es que cuando el texto es largo, el ancho del menú no se ajusta correctamente y el texto se trunca cuando se muestra. He intentado ajustar todas las propiedades obvias para aliviar este problema, pero no he tenido éxito. ¿Alguien sabe cómo hacer que la escala de ancho del menú del cuadro combinado sea adecuada a los datos que está procesando?

Mi implementación de renderizador de elementos personalizados es:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    styleName="plain" horizontalScrollPolicy="off"> 

    <mx:Image source="{data.icon}" />
    <mx:Label text="{data.label}" fontSize="11" fontWeight="bold" truncateToFit="false"/>

</mx:HBox>

Y mi combobox lo usa así:

    <mx:ComboBox id="quicklinksMenu" change="quicklinkHandler(quicklinksMenu.selectedItem.data);" click="event.stopImmediatePropagation();" itemRenderer="renderers.QuickLinkItemRenderer" width="100%"/>

EDITAR: Debería aclarar algo: puedo establecer la propiedad dropdownWidth en el cuadro combinado en algún valor arbitrariamente grande; esto hará que todo encaje, pero será demasiado ancho. Dado que los datos que se muestran en este cuadro combinado son genéricos, quiero que se clasifiquen automáticamente en el elemento más grande en el proveedor de datos (la documentación flexible dice que hará esto, pero tengo la sensación de que mi procesador de elementos personalizados está rompiendo ese comportamiento)

Answer 1

¿Has probado usar el método calculatePreferredSizeFromData () ?

protected override function calculatePreferredSizeFromData(count:int):Object

Answer 2

Solo un pensamiento al azar (no hay idea si esto ayudará):

Intente configurar el ancho HBox y el ancho de la etiqueta al 100%. Eso generalmente soluciona los problemas que he encontrado que eran similares.

Answer 3

Esta respuesta es probablemente demasiado tarde, pero tuve un problema muy similar con los anchos de columna de DataGrid.

Después de mucho noodling, decidí renderizar mi texto en un TextField privado, obtener el ancho del texto renderizado de eso y establecer explícitamente el ancho de la columna en todos los eventos de tipo de tamaño apropiados. Un poco de hack-y funciona bastante bien si no tienes muchos datos cambiantes.

Answer 4

Deberías hacer dos cosas:

• para el texto, use mx.controls.Text (que admite el ajuste de texto) en lugar de mx.controls.Label
• establecer comboBox''s dropdownFactory.variableRowHeight=true - este dropdownFactory es normalmente una subclase de List, y el itemRenderer que está configurando en ComboBox es lo que se usará para representar cada elemento de la lista

Y no establezca explícitamente comboBox.dropdownWidth ; deje que el valor predeterminado de comboBox.widt h se use como ancho desplegable.

Answer 5

Si observas el método de measure de mx.controls.ComboBase , verás que el comboBox calcula que es medidoMinWidth como una suma del ancho del texto y el ancho del botón comboBox.

    // Text fields have 4 pixels of white space added to each side
    // by the player, so fudge this amount.
    // If we don''t have any data, measure a single space char for defaults
    if (collection && collection.length > 0)
    {
        var prefSize:Object = calculatePreferredSizeFromData(collection.length);

        var bm:EdgeMetrics = borderMetrics;

        var textWidth:Number = prefSize.width + bm.left + bm.right + 8;
        var textHeight:Number = prefSize.height + bm.top + bm.bottom 
                    + UITextField.TEXT_HEIGHT_PADDING;

        measuredMinWidth = measuredWidth = textWidth + buttonWidth;
        measuredMinHeight = measuredHeight = Math.max(textHeight, buttonHeight);
    }

El método calculatePreferredSizeFromData mencionado por @defmeta (implementado en mx.controls.ComboBox ) asume que el representador de datos es solo un campo de texto y usa flash.text.lineMetrics para calcular el ancho del texto del campo de etiqueta en el objeto de data . Si desea agregar un elemento visual adicional al procesador de elementos y hacer que el ComboBox tome su tamaño en cuenta cuando calcule su propio tamaño, deberá extender la clase mx.controls.ComboBox y anular el método calculatePreferredSizeFromData manera:

  override protected function calculatePreferredSizeFromData(count:int):Object
  {
      var prefSize:Object = super.calculatePrefferedSizeFromData(count);
      var maxW:Number = 0;
      var maxH:Number = 0;
      var bookmark:CursorBookmark = iterator ? iterator.bookmark : null;
      var more:Boolean = iterator != null;

      for ( var i:int = 0 ; i < count ; i++)
      {
          var data:Object;
          if (more) data = iterator ? iterator.current : null;
          else data = null;
          if(data)
          {
              var imgH:Number;
              var imgW:Number;

              //calculate the image height and width using the data object here

              maxH = Math.max(maxH, prefSize.height + imgH);
              maxW = Math.max(maxW, prefSize.width + imgW);
          }
          if(iterator) iterator.moveNext();
      }

      if(iterator) iterator.seek(bookmark, 0);
      return {width: maxW, height: maxH};
 }

Si es posible, almacene las dimensiones de la imagen en el objeto de datos y use esos valores como imgH e imgW , que harán que el tamaño sea mucho más fácil.

EDITAR:

Si agrega elementos al procesamiento además de una imagen, como una etiqueta, también tendrá que calcular su tamaño cuando itere a través de los elementos de datos y tenga en cuenta esas dimensiones cuando calcule maxH y maxW .