Flex：ロード時に空のArrayCollectionにバインドされたコンポーネントは、ArrayCollectionが更新されたときに期待どおりにレンダリングされません

StackOverflow https://stackoverflow.com/questions/1631360

  •  06-07-2019
  •  | 
  •  

質問

Flexは初めてで、ArrayCollectionにバインドされたTileListを使用しています。配列コレクションはロード時に空になり、am 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>

ロード時にバインディングにデータがある2番目のTileListが予想どおり（800px幅）レンダリングされますが、最初のTileListがレンダリングされるビットは正しい幅ではなく、スクロールバーが周囲にあります。

これがなぜ起こっているのかを説明したり、これを回避するための回避策を提供したりできますか？

よろしく、

クリス

役に立ちましたか？

解決

このセクションが問題を引き起こしている可能性があります：

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

こちらから：

  

ArrayCollection内のデータのソース。   ArrayCollectionオブジェクトは   行った変更を表す   ソース配列に直接。常に   ICollectionViewまたはIListを使用します   コレクションを変更するメソッド。

     

このプロパティは、   データバインディングのソース。このとき   プロパティが変更され、ディスパッチされます   listChangedイベント。

だから私はおそらく行を次のように変更します：

myList1 = new ArrayCollection（[{item：＆quot; foo＆quot;}、{item：＆quot; bar＆quot;}]）;

他のヒント

http://livedocs.adobe.com/flex /3/langref/mx/controls/TileList.html APIを確認してください。

このようにcolumnWidthおよびrowHeightプロパティを設定します

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

おそらくより「適切な」ものがあるでしょう。それを行う方法ですが、それはあなたが始めるはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top