Flex: Die Komponenten zu leere Arraycollection zur Ladezeit gebunden übertragen nicht wie erwartet, wenn die Arraycollection aktualisiert

Question

Ich bin neu in Flex und TileList bin mit auf eine Arraycollection gebunden. Die Array-Sammlung ist beim Laden leer und aktualisiert anschließend mit den Ergebnissen aus am Httpservice-Aufruf. Das Problem ist, dass die Elementrenderern nicht wie erwartet wiedergegeben wird, ich vermute ich, weil es keine Daten, als sie zum ersten Mal bei der Ladezeit gemacht wurden. Hier ist vereinfachtes Beispiel:

<?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>

Sie werden feststellen, dass der zweite TileList der Bindungen Daten zur Ladezeit hat rendert wie erwartet (800px breit), Bit der erste TileList gemacht wird, ist nicht die richtige Breite und hat Scrollbalken um ihn herum.

Kann mir jemand erklären, warum dies geschieht oder sogar einige Workarounds zur Verfügung stellen, dies zu vermeiden?

Grüße,

Chris

Answer 1

Es ist wahrscheinlich, dass dieser Abschnitt die Probleme verursacht:

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

hier :

  

Datenquelle in der Arraycollection.   Das Arraycollection Objekt nicht   repräsentieren alle Änderungen, die Sie machen   direkt an die Quelle-Array. Immer   Verwenden Sie die ICollectionView oder IList   Methoden, um die Sammlung zu ändern.

     

Diese Eigenschaft kann als die verwendet werden,   Quelle für die Datenbindung. Wenn das   Eigenschaft modifiziert, es entsendet   das Listchanged-Ereignis aus.

So würde ich wahrscheinlich die Zeile ändern:

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

Answer 2

http://livedocs.adobe.com/flex /3/langref/mx/controls/TileList.html Überprüfen Sie die API.

Stellen Sie die column und rowHeight Eigenschaften wie diese,

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

Es ist wahrscheinlich eine „richtige“ Art und Weise, es zu tun, aber das sollten Sie den Start.