Hi Tim. the sample really looks great. I would try to analyze the codes this weekend since I was pretty occupied these past few days.
The display alone is already what I am hoping to achieve since I don't want to separate the age and months on another column. If I did separate it, then it would be easier on my part but it kind of defeats the purpose. Thanks a bunch! Regards, Angelo ________________________________ From: Tim Hoff <[email protected]> To: [email protected] Sent: Thursday, 18 June, 2009 1:46:34 Subject: [flexcoders] Re: Binding two elements in a single datagrid column Ok, here's how I would do it; with efficiency and best-practice in mind: http://www.timothyh off.com/projects /AgeItemRenderer Sample/AgeItemRe ndererSample. html ( right click to view source ) Two main differences Steve: First, use createChildren to add the children, instead of in set data. I suspect that what's happening with the way you are doing it is that each time the data is changed (which, because the itemRenderers are recycled, happens on every scroll), the instance of the child is attempted to be added to the display list. I can't see the code in flash.display. DisplayObjectCon tainer, but I suspect that the code is checking to see if the instance exists already and/or re-parenting it. Either way, this is an un-necessary step. You only need to add the child once and then use the data to control it's state. Second, for efficiency, try to avoid using containers in itemRenderers. A good practice is to extend UIComponent and do the layout manually. It's a little more work, but you get some good performance benefits. I encourage you to read this series and also look at the source code for the Flex controls. They all follow the same component life-cycle pattern. Angelo, look at this sample for how to use an itemEditor. -TH --- In flexcod...@yahoogro ups.com, "valdhor" <valdhorlists@ ...> wrote: > > I thought that was the idea. > > In the example, I wanted a new NumericStepper for each data item (Actually > two new NumericSteppers) . If createChildren only runs once, how would you > get the required output? In other words, can you post your version of the > example using createChildren ? > > > > --- In flexcod...@yahoogro ups.com, "Tim Hoff" TimHoff@ wrote: > > > > > > Yes, createChildren will only execute once; while set data will execute > > many times. Perhaps it's not a problem if the same child gets added to > > the display list everytime that the data is set. But usually, you only > > need to add them once. > > > > -TH > > > > --- In flexcod...@yahoogro ups.com, "valdhor" <valdhorlists@> wrote: > > > > > > I use addChild in the set data function only because I always have. > > > > > > I have built hundreds of renderers this way and none of them have > > given me a problem. If there's a good reason why I shouldn't do it this > > way, I'm all ears. > > > > > > > > > --- In flexcod...@yahoogro ups.com, "Tim Hoff" TimHoff@ wrote: > > > > > > > > > > > > I'm with you Steve; about using AS for an itemRenderer. I do wonder > > why > > > > you would use addChild in the set data function though; rather than > > in > > > > createChildren . For mxml, this should work Angelo: > > > > > > > > <mx:itemRenderer> > > > > <mx:Component> > > > > <mx:HBox horizontalGap= "5" horizontalAlign= "center" > > > > width="100%" horizontalScrollPol icy="off" > > verticalScrollPolic y="off"> > > > > <mx:NumericStepper id="nsOutwardAgeYea r" value="{ data.Age > > > > }" minimum="0" maximum="200" stepSize="1" width="50" > > > > textAlign="center" /> > > > > <mx:NumericStepper id="nsOutwardAgeMon ths" value="{ > > > > data.Months }" minimum="0" maximum="200" stepSize="1" width="50" > > > > textAlign="center" /> > > > > </mx:HBox> > > > > </mx:Component> > > > > </mx:itemRenderer> > > > > > > > > For the HBox, notice the use of horizontalGap, instead of a spacer > > as > > > > well. Just cleans it up a bit. > > > > > > > > Cheers, > > > > -TH > > > > > > > > --- In flexcod...@yahoogro ups.com, "valdhor" <valdhorlists@> wrote: > > > > > > > > > > This is probably possible in MXML but I prefer to write my item > > > > > renderers in ActionScript. .. > > > > > > > > > > main.mxml: > > > > > <?xml version="1.0" encoding="utf- 8"?> > > > > > <mx:Application xmlns:mx="http: //www.adobe. com/2006/ mxml" > > > > > layout="absolute"> > > > > > <mx:Script> > > > > > <![CDATA[ > > > > > import mx.collections. ArrayCollection; > > > > > > > > > > [Bindable] private var _arrTest:ArrayColle ction = new > > > > > ArrayCollection( [{"Age":5, "Months":10} , {"Age":18, "Months":3}, > > > > > {"Age":1, "Months":2}] ); > > > > > ]]> > > > > > </mx:Script> > > > > > <mx:DataGrid dataProvider= "{_arrTest} "> > > > > > <mx:columns> > > > > > <mx:DataGridColumn headerText=" Age" width="120" > > > > > itemRenderer= "NumericStepperR enderer"/> > > > > > </mx:columns> > > > > > </mx:DataGrid> > > > > > </mx:Application> > > > > > > > > > > NumericStepperRende rer.as: > > > > > package > > > > > { > > > > > import mx.containers. HBox; > > > > > import mx.controls. NumericStepper; > > > > > > > > > > public class NumericStepperRende rer extends HBox > > > > > { > > > > > private var nsOutwardAgeYear: NumericStepper = new > > > > > NumericStepper( ); > > > > > private var nsOutwardAgeMonths: NumericStepper = new > > > > > NumericStepper( ); > > > > > > > > > > public function NumericStepperRende rer() > > > > > { > > > > > super(); > > > > > nsOutwardAgeYear. minimum = 0; > > > > > nsOutwardAgeMonths. minimum = 0; > > > > > nsOutwardAgeYear. maximum = 200; > > > > > nsOutwardAgeMonths. maximum = 200; > > > > > nsOutwardAgeYear. stepSize = 1; > > > > > nsOutwardAgeMonths. stepSize = 1; > > > > > nsOutwardAgeYear. width = 50; > > > > > nsOutwardAgeMonths. width = 50; > > > > > nsOutwardAgeYear. setStyle( "textAlign" , "center"); > > > > > nsOutwardAgeMonths. setStyle( "textAlign" , "center"); > > > > > } > > > > > > > > > > override public function set data(value:Object) :void > > > > > { > > > > > super.data = value; > > > > > if(value != null) > > > > > { > > > > > nsOutwardAgeYear. value = value.Age; > > > > > nsOutwardAgeMonths. value = value.Months; > > > > > addChild(nsOutwardA geMonths) ; > > > > > addChild(nsOutwardA geYear); > > > > > } > > > > > } > > > > > } > > > > > } > > > > > > > > > > I will leave it as an exercise for the reader how to add an event > > > > > listener for the change event. > > > > > > > > > > > > > > > HTH > > > > > > > > > > > > > > > > > > > > Steve > > > > > > > > > > --- In flexcod...@yahoogro ups.com, Angelo Anolin angelo_anolin@ > > > > > wrote: > > > > > > > > > > > > Hi FlexCoders, > > > > > > > > > > > > I have a datagrid, where one of the columns is defined as > > follows: > > > > > > > > > > > > <mx:DataGridColumn width="150" > > > > > > > <mx:headerRenderer> > > > > > > <mx:Component> > > > > > > <mx:VBox horizontalScrollPol icy="off" verticalScrollPolic y="off" > > > > > verticalGap= "2"> > > > > > > <mx:Box horizontalAlign= "center" width="100%"> > > > > > > <mx:Label text="Age" /> > > > > > > </mx:Box> > > > > > > <mx:HBox horizontalAlign= "center" width="100%" > > > > > > > <mx:Label text="Year" horizontalCenter= "true" width="50" /> > > > > > > <mx:Spacer width="10"/> > > > > > > <mx:Label text="Month" horizontalCenter= "true" width="50" /> > > > > > > </mx:HBox> > > > > > > </mx:VBox> > > > > > > </mx:Component> > > > > > > </mx:headerRenderer> > > > > > > <mx:itemRenderer> > > > > > > <mx:Component> > > > > > > <mx:HBox horizontalAlign= "center" width="100%" > > > > > horizontalScrollPol icy="off" verticalScrollPolic y="off"> > > > > > > <mx:NumericStepper id="nsOutwardAgeYea r" minimum="0" > > maximum="200" > > > > > stepSize="1" width="50" textAlign="center" /> > > > > > > <mx:Spacer width="5"/> > > > > > > <mx:NumericStepper id="nsOutwardAgeMon ths" minimum="0" > > > > > maximum="200" stepSize="1" width="50" textAlign="center" /> > > > > > > </mx:HBox> > > > > > > </mx:Component> > > > > > > </mx:itemRenderer> > > > > > > </mx:DataGridColumn> > > > > > > > > > > > > Now, how would I be able to bind in both components my array > > > > > collection? In the other columns, I can easily bind the > > datagridcolumn > > > > > with a single item inside the arrayCollection object by > > > > > > > > > > > > <mx:DataGridColumn headerText=" Test" dataField="myTestIt em" > > > > > width="20"/> > > > > > > > > > > > > I want to bind two items inside my array collection into the > > > > > numericStepper which I placed side by side in the datagrid. > > > > > > > > > > > > Like for example if my arraycollection has the following data > > > > > > > > > > > > var _arrTest:ArrayColle ction = new ArrayCollection( [{"Age":5, > > > > > "Months":10} , {"Age":18, "Months":3}, ("Age":1, "Months":2)] ); > > > > > > > > > > > > the Age and Months items should be bound to nsOutwardAgeYear and > > > > > nsOutwardAgeMonths respectively. > > > > > > > > > > > > Thanks and regards, > > > > > > Angelo > > > > > > > > > > > > > > > > > > > > >
