Flex: Componentes obrigado a ArrayCollection vazia no momento do carregamento não aparecerem como previsto quando o ArrayCollection é atualizado

Question

Eu sou novo para Flex e estou usando TileList vinculado a um ArrayCollection. A coleção de matriz está vazia no momento do carregamento, e em seguida, atualiza com os resultados da chamada am HTTPService. O problema é que os representantes de itens não estão sendo processado como esperado, eu estou supondo, porque não havia dados quando eles foram prestados pela primeira vez no tempo de carregamento. exemplo, aqui está 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>

Você vai notar que a segunda TileList cujos ligações tem dados em tempo de carregamento processa como esperado (800px de largura), mordeu o primeiro TileList é processado não é a largura correta e tem barras de rolagem em torno dele.

Alguém poderia explicar por que isso está acontecendo ou até mesmo fornecer alguns arounds trabalho para evitar isso?

Saudações,

Chris

Answer 1

É provável que esta seção está causando os problemas:

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

A partir aqui :

fonte de dados no ArrayCollection. O objeto ArrayCollection não representam todas as mudanças que você faz directamente para a matriz de origem. Sempre usar o ICollectionView ou IList métodos para modificar a coleção.

Esta propriedade pode ser usada como fonte para os dados de ligação. Quando isso propriedade é modificada, ela despacha o evento ListChanged.

Então, eu provavelmente altere a linha para:

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

Answer 2

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

Definir as propriedades columnWidth e rowHeight como este,

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

Há provavelmente uma maneira mais "adequada" para fazê-lo, mas isso deve começar.