Yes - I am using a custom ItemRenderer. Also of note (as per amy's suggestion) while Q2 DOES represent what is happening, all my data is bound to a model (I believe). So, I am overriding the set data method/property already, and upon setting the data property, I'm updating my model which is updating my view (using Cairngorm on this project so - I'm sort of forced to do things "proper"). Here's my itemRenderer code: ---------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="106" height="100" useHandCursor="{asButton}" buttonMode="{asButton}" click="onClick()" xmlns:vo="com.r.vo.*" xmlns:degrafa="http://www.degrafa.com/2007"; rollOver="mouseOver()" rollOut="mouseOut()" addedEffect="{addMe}" removedEffect="{removeMe}"> <mx:states> <mx:State name="Highlighted"> <mx:SetProperty target="{this}" name="filters" value="{myFilters}" /> </mx:State> <mx:State name="Disabled"> <mx:AddChild position="lastChild"> <mx:Canvas width="100%" height="100%" backgroundColor="#999999" backgroundAlpha=".40" /> </mx:AddChild> </mx:State> <mx:State name="Hover"> <mx:SetProperty target="{info}" name="y" value="70" /> <mx:SetProperty target="{info}" name="height" value="30" /> <mx:SetProperty target="{surf}" name="y" value="70" /> </mx:State> <mx:State name="HoverHighlighted" basedOn="Highlighted"> <mx:SetProperty target="{info}" name="y" value="70" /> <mx:SetProperty target="{info}" name="height" value="30" /> <mx:SetProperty target="{surf}" name="y" value="70" /> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="Hover"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="30" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="Highlighted" toState="HoverHighlighted"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="70" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="30" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="Hover" toState="*"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="0" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> <mx:Transition fromState="HoverHighlighted" toState="Highlighted"> <mx:Parallel duration="1000"> <mx:Move target="{surf}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Move target="{info}" yTo="100" easingFunction="Exponential.easeOut"/> <mx:Resize target="{info}" heightTo="0" easingFunction="Exponential.easeOut"/> </mx:Parallel> </mx:Transition> </mx:transitions> <mx:Script> <![CDATA[ import mx.effects.easing.Exponential; import mx.effects.easing.Bounce; import com.r.model.AppModelLocator; import com.r.vo.Product; import com.adobe.cairngorm.control.CairngormEventDispatcher; import com.r.control.ItemClickEvent; [Bindable]private var model:AppModelLocator = AppModelLocator.getInstance(); [Bindable]private var myFilters:Array = [new GlowFilter(0x0000ff)]; override public function set data(v:Object):void { // if (v) { product = new Product(v as XML); disabledList = model.disabledList; if (product.productId >= 1000) showLink = false; else showLink = true; // } } private function onClick():void { var cgEvent:ItemClickEvent = new ItemClickEvent(product); CairngormEventDispatcher.getInstance().dispatchEvent(cgEvent); } private function set disabledList(v:String):void { if (!v) return; var a:Array = v.split(" "); var noEndTables:Boolean = false; var noDeskLamps:Boolean = false; for each (var str:String in a) { var n:Number = Number(str); if (n == AppModelLocator.END_TABLES) noEndTables = true; else if (n == AppModelLocator.DESK_LIGHTING) noDeskLamps = true; } var iAm:int = model.whatIsIt(product.productId); currentState = ''; asButton = true; if (noEndTables) if (iAm == AppModelLocator.END_TABLES) { asButton = false; currentState = "Disabled"; } if (noDeskLamps) if (iAm == AppModelLocator.DESK_LIGHTING) { asButton = false; currentState = "Disabled"; } } private function onClickMoreInfoLink(event:MouseEvent):void { event.stopImmediatePropagation(); event.preventDefault(); } private function mouseOver():void { if (currentState == "Disabled") return; currentState = (currentState == "Highlighted") ? "HoverHighlighted" : "Hover"; } private function mouseOut():void { if (currentState == "Disabled") return; currentState = (currentState == "HoverHighlighted") ? "Highlighted" : ""; } [Bindable]private var _prodDesc:String = ""; private function set prodDesc(v:String):void { if (v == null) return; var newV:String = v.replace(/[,.&?!:;]/g,""); newV = newV.replace(/ and /g," "); _prodDesc = newV.toLowerCase(); } private function onError():void { trace('here'); img.source = unavailable; } [Embed("assets/skins/unavailableImg.png")] private var unavailable:Class; [Bindable]private var asButton:Boolean = true; [Bindable]private var showLink:Boolean = true; ]]> </mx:Script> <mx:Binding source="model.disabledList" destination="disabledList" /> <mx:Binding source="product.description" destination="prodDesc" /> <vo:Product id="product" /> <mx:Image source="@Embed('assets/skins/animation.swf')" verticalCenter="0" horizontalCenter="0" width="40" height="40" /> <mx:Image width="100" height="100" id="img" source="{product.thumb}" horizontalCenter="0" top="0" completeEffect="{showIt}" securityError="onError()" ioError="onError()"/> <degrafa:Surface id="surf" x="0" y="100"><!-- y=70 --> <degrafa:fills> <degrafa:SolidFill id="neonblue" color="#11A4DE" /> </degrafa:fills> <degrafa:GeometryGroup> <degrafa:Polygon fill="{neonblue}"> <degrafa:data>0,0 {width},-8 {width},1 0,1</degrafa:data><!-- 0,0 {w},-8 {w},30 0,30 --> </degrafa:Polygon> </degrafa:GeometryGroup> </degrafa:Surface> <mx:Canvas id="info" width="100%" x="0" y="100" height="0" styleName="ThumbItemInfo"><!-- y=70 height=30 --> <mx:Text styleName="ThumbTitle" text="{_prodDesc}" selectable="false" width="100%" height="16" truncateToFit="true"/> <mx:Text visible="{showLink}" htmlText="<a href='{product.link}'>more info</a>" styleName="ThumbTitleLink" y="12" selectable="true" useHandCursor="true" buttonMode="true" click="onClickMoreInfoLink(event)" /> </mx:Canvas> <mx:Fade id="showIt" duration="250" alphaTo="1" target="{img}" /> <mx:Parallel id="fadeIn" target="{img}"> <mx:Fade target="{img}" alphaFrom="0" alphaTo="1" /> <mx:Blur target="{img}" blurXFrom="50" blurXTo="0" /> </mx:Parallel> <mx:Parallel id="addMe" duration="2500"> <mx:Blur blurXFrom="20" blurXTo="0" /> <mx:Fade alphaFrom="0" alphaTo="1" /> </mx:Parallel> <mx:Parallel id="removeMe" duration="2500"> <mx:Blur blurXFrom="0" blurXTo="20" /> <mx:Fade alphaFrom="1" alphaTo="0" /> </mx:Parallel> </mx:Canvas>
--- In [email protected], "Amy" <amyblankens...@...> wrote: > > --- In [email protected], "nathanpdaniel" <ndaniel@> wrote: > > > > I'm using the HorizontalList (HList) component and I've run into an issue > > where when data is updated dynamically some items are not rendered. > > I load data via an XML file which sets up in my app several > > XMLListCollection variables. Users can select different menu options to > > determine which collection is used as the dataProvider for the HList. > > These collections range in length from 3 - 50 items. My HList only > > displays 5 at any given time (with a horizontal scroll bar). > > What will happen occassionally is when I go from a short list (3 items) to > > a larger list, items will not render. > > The new item at position HList.dataProvider[old list length - 1] (zero > > based index) will be missing. Not as though I have invalid data so it > > renders wrong but, as though the data is not there at all. It puts spacing > > in there to account for it but, it's the equivalent of setting an object's > > visible property to false but includeInLayout to true. The other 4 in the > > first 5 will render properly. I scroll the list to show more, > > HList.dataProvider[old list length + 1] and HList.dataProvider[old list > > length + 2] will not render. As I scroll away from the beginning of the > > list more and more of the 5 items to display won't render until it throws > > an error from all 5 not rendering. However, if I go from a short list, of > > say 3 items, to a list of 4 items, then a list of 5 items, the probably is > > avoided across all collections. It will occur if I go from a list of > > length < 5 directly to a list of lenght > 5. Also of note, if the list > > length < 10, I can avoid throwing errors, however, if it gets beyond that, > > it starts throwing them. > > I am setting a filter on the HList.dataProvider saying if (of all products) > > the product matches one of the two that need to be ignored, filter them > > from the list. So irregardless of which collection is the dataProvider, if > > product A or product B is in this list, filter it out. I am also using an > > itemRenderer (a custom component to display an image). > > Anyone have any ideas, it's been driving me nuts for a while now. > > Sometimes it doesn't even happen at all and I've yet to be able to > > consistantly reproduce it with anything. I'm sort of at a loss for what to > > do since, I don't really know what's causing the issue... ?? > > It sounds like you have the old "trying to set properties in > creationcomplete" issue. Check out Q2 here > http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf > to see if that is it. > > HTH; > > Amy >
