Гибкий:Компоненты, привязанные к пустой ArrayCollection во время загрузки, не отображаются должным образом при обновлении ArrayCollection.

Question

Я новичок в Flex и использую TileList, привязанный к ArrayCollection.Коллекция массивов пуста во время загрузки, а затем обновляется результатами вызова HTTPService.Проблема в том, что средства визуализации элементов не отображаются должным образом, я предполагаю, что не было данных, когда они впервые отображались во время загрузки.Вот упрощенный пример:

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

Вы заметите, что второй TileList, привязки которого содержат данные во время загрузки, отображается как ожидалось (ширина 800 пикселей), но первый TileList отображается некорректной ширины и вокруг него имеются полосы прокрутки.

Может ли кто-нибудь объяснить, почему это происходит, или даже предложить обходные пути, чтобы избежать этого?

С уважением,

Крис

Answer 1

Вероятно, этот раздел вызывает проблемы:

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

От здесь:

источник данных в ArrayCollection.Объект ArrayCollection не представляет каких -либо изменений, которые вы вносите непосредственно в массив исходных источников.Всегда используйте методы IcollectionView или ILIST для изменения коллекции.

Это свойство может использоваться в качестве источника для привязки данных.Когда это свойство будет изменено, оно отправляет в списке события.

Поэтому я бы, вероятно, изменил строку на:

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

Answer 2

http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.htmlПроверьте API.

Установите свойства columnsWidth и rowHeight следующим образом:

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

Вероятно, существует более «правильный» способ сделать это, но это должно помочь вам начать.