Flex: los componentes vinculados a ArrayCollection vacío en el momento de la carga no se procesan como se esperaba cuando se actualiza ArrayCollection

Question

Soy nuevo en Flex y estoy usando TileList vinculado a una ArrayCollection. La colección de matrices está vacía en el momento de la carga y luego se actualiza con los resultados de una llamada de servicio HTTPS. El problema es que los renderizadores de elementos no se representan como se esperaba, supongo que porque no había datos cuando se representaron por primera vez en el momento de la carga. Aquí hay un ejemplo simplificado:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

  <mx:Script>
    <![CDATA[

      import mx.collections.ArrayCollection;

      [Bindable]
      public var myList1:ArrayCollection = new ArrayCollection();

      [Bindable]
      public var myList2:ArrayCollection = new ArrayCollection([{item:"foo"}, {item:"bar"}]);

      public function updateMyList():void
      {
          myList1.source = [{item:"foo"}, {item:"bar"}];
      }

    ]]>
  </mx:Script>

<mx:Button id="myButton" label="Update My List"
           click="updateMyList();"/>


  <mx:TileList dataProvider="{myList1}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>


<!-- This one renders as expected  -->

  <mx:TileList dataProvider="{myList2}"
           direction="vertical"
           width="800" >

    <mx:itemRenderer>

      <mx:Component >

    <mx:Canvas backgroundColor="yellow" >
      <mx:Label text="{data.item}" width="800"  />
    </mx:Canvas>

      </mx:Component>

    </mx:itemRenderer>

  </mx:TileList>

</mx:Application>

Notará que la segunda TileList cuyos enlaces tienen datos en el momento de la carga se muestra como se esperaba (800px de ancho), pero la primera TileList que se muestra no tiene el ancho correcto y tiene barras de desplazamiento a su alrededor.

¿Alguien podría explicar por qué sucede esto o incluso proporcionar algunas soluciones para evitar esto?

Saludos,

Chris

Answer 1

Es probable que esta sección esté causando los problemas:

public function updateMyList():void
          {
              myList1.source = [{item:"foo"}, {item:"bar"}];
          }

De aquí :

  

fuente de datos en ArrayCollection.   El objeto ArrayCollection no   representar cualquier cambio que realice   directamente a la matriz fuente. Siempre   use el ICollectionView o IList   métodos para modificar la colección.

     

Esta propiedad se puede usar como   fuente de enlace de datos. Cuando esto   la propiedad se modifica, despacha   el evento listChanged.

Entonces probablemente cambiaría la línea a:

myList1 = new ArrayCollection ([{item: " foo "}, {item: " bar "}]);

Answer 2

http://livedocs.adobe.com/flex /3/langref/mx/controls/TileList.html Verifique la API.

Establezca las propiedades columnWidth y rowHeight de esta manera,

  <mx:TileList dataProvider="{myList1}"
                   direction="vertical"
                   width="800" columnWidth="800" rowHeight="25">

Probablemente hay un más "apropiado" manera de hacerlo, pero eso debería ayudarlo a comenzar.