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 [email protected], "Tim Hoff" <timh...@...> 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%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> > <mx:NumericStepper id="nsOutwardAgeYear" value="{ data.Age > }" minimum="0" maximum="200" stepSize="1" width="50" > textAlign="center"/> > <mx:NumericStepper id="nsOutwardAgeMonths" 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 [email protected], "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:ArrayCollection = 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="NumericStepperRenderer"/> > > </mx:columns> > > </mx:DataGrid> > > </mx:Application> > > > > NumericStepperRenderer.as: > > package > > { > > import mx.containers.HBox; > > import mx.controls.NumericStepper; > > > > public class NumericStepperRenderer extends HBox > > { > > private var nsOutwardAgeYear:NumericStepper = new > > NumericStepper(); > > private var nsOutwardAgeMonths:NumericStepper = new > > NumericStepper(); > > > > public function NumericStepperRenderer() > > { > > 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(nsOutwardAgeMonths); > > addChild(nsOutwardAgeYear); > > } > > } > > } > > } > > > > I will leave it as an exercise for the reader how to add an event > > listener for the change event. > > > > > > HTH > > > > > > > > Steve > > > > --- In [email protected], 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 horizontalScrollPolicy="off" verticalScrollPolicy="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%" > > horizontalScrollPolicy="off" verticalScrollPolicy="off"> > > > <mx:NumericStepper id="nsOutwardAgeYear" minimum="0" maximum="200" > > stepSize="1" width="50" textAlign="center"/> > > > <mx:Spacer width="5"/> > > > <mx:NumericStepper id="nsOutwardAgeMonths" 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="myTestItem" > > 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:ArrayCollection = 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 > > > > > >
