Flex : 부하 시간에 빈 배열에 바인딩 된 구성 요소는 ArrayCollection이 업데이트 될 때 예상대로 렌더링하지 않습니다.
-
06-07-2019 - |
문제
나는 Flex를 처음 접했고 Tilelist를 ArrayCollection에 바인딩하고 있습니다. 배열 컬렉션은로드 타임에 비어있는 다음 AM httpservice Call의 결과로 업데이트됩니다. 문제는 항목 렌더러가 예상대로 렌더링되지 않는다는 것입니다. 부하 시간에 처음 렌더링 될 때 데이터가 없기 때문에 추측하고 있습니다. 간단한 예는 다음과 같습니다.
<?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는 예상대로 렌더링하고 (폭이 800px), 첫 번째 Tilelist가 렌더링되는 비트가 올바른 너비가 아니며 주변에 스크롤바가 있습니다.
누구든지 왜 이런 일이 일어나고 있는지 설명 할 수 있습니까?
문안 인사,
크리스
해결책
이 섹션은 문제를 일으킬 수 있습니다.
public function updateMyList():void
{
myList1.source = [{item:"foo"}, {item:"bar"}];
}
에서 여기:
ArrayCollection의 데이터 소스. ArrayCollection 객체는 소스 배열로 직접 변경하는 변경 사항을 나타내지 않습니다. 항상 iCollectionView 또는 Ilist 메소드를 사용하여 컬렉션을 수정하십시오.
이 속성은 데이터 바인딩의 소스로 사용할 수 있습니다. 이 속성이 수정되면 ListChanged 이벤트를 발송합니다.
그래서 나는 아마도 라인을 다음으로 바꿀 것입니다.
myList1= new ArrayCollection([{item:"foo"}, {item:"bar"}]);
다른 팁
http://livedocs.adobe.com/flex/3/langref/mx/controls/tilelist.htmlAPI를 확인하십시오.
이와 같은 columnwidth 및 rowHeight 속성을 설정하십시오.
<mx:TileList dataProvider="{myList1}"
direction="vertical"
width="800" columnWidth="800" rowHeight="25">
아마도 더 "적절한"방법이있을 것입니다. 그러나 그로 인해 시작해야합니다.