Adobe Flex ItemRenderer: Making Calculations

问题

I have a database including a user's Date of Birth, but I want to display their age. I have a function which calculates the age but I cannot use it in the ItemRenderer and I don't know why. I don't think it will work if I use this code outside of the ItemRenderer. The DOB is accessed by {data.dob}.

Here's my code:

<s:GridColumn dataField="age" headerText="Age" width="80">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        // Retrieving the user's DOB
                                        var dateStr:String = "{data.dob}";
                                        //Splitting the DOB up to make it compatible with Flex
                                        var parts:Array = dateStr.split("-");

                                        if(parts == null || parts.length != 3)
                                        {
                                            Alert.show("There is an error retrieving the birthday.");
                                        }

                                        var dobDay:* = parts[2];
                                        var dobMonth:* = parts[1] - 1;
                                        var dobYear:* = parts[0];

                                        var userDOB : Date = new Date(dobYear, dobMonth, dobDay);
                                        var today : Date = new Date();

                                        var diff : Date = new Date();
                                        diff.setTime( today.getTime() - userDOB.getTime() );

                                        var userAge : int = diff.getFullYear() - 1970;
                                    ]]>
                                </fx:Script>
                                <s:Label id="ageLbl" text="userAge" />
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>`

At first I was getting a #1084 error for var dateStr:String = {data.dob}; so I changed it to var dateStr:String = "{data.dob}"; and the errors migrated to 1120: Access of Undefined property Alert. I also had the same error for: diff, parts, today, userAge, userDOB. Any ideas here? Like I said the code works when outside of the ItemRenderer, using just one DOB.

回答1:

Try this:

<s:DataGrid x="71" y="58" width="490" height="264" requestedRowCount="4">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
            <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
            <s:GridColumn dataField="dob" headerText="Age" width="80">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <fx:Script>
                                <![CDATA[
                                    import mx.controls.Alert;

                                    override public function prepare(hasBeenRecycled:Boolean):void {

                                        if(data!=null)
                                        {
                                            trace(data.dob);

                                            // Retrieving the user's DOB
                                            var dateStr:String = data.dob;
                                            //Splitting the DOB up to make it compatible with Flex
                                            var parts:Array = dateStr.split("-") ;

                                            if(parts == null || parts.length != 3)
                                            {
                                                Alert.show("There is an error retrieving the birthday.");
                                            }

                                            var dobDay:* = parts[2];
                                            var dobMonth:* = parts[1] - 1;
                                            var dobYear:* = parts[0];

                                            var userDOB : Date = new Date(dobYear, dobMonth, dobDay);
                                            var today : Date = new Date();

                                            var diff : Date = new Date();
                                            diff.setTime( today.getTime() - userDOB.getTime() );

                                            var userAge : int = diff.getFullYear() - 1970;

                                            ageLbl.text = userAge.toString(); 
                                        }
                                    }

                                ]]>
                            </fx:Script>
                            <s:Label id="ageLbl" text="userAge"  top="7" left="9"/>
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>

        </s:ArrayList>
    </s:columns>
    <s:ArrayList>
        <fx:Object dataField1="data1" dataField2="data1" dob="1990-05-25"></fx:Object>
        <fx:Object dataField1="data2" dataField2="data2" dob="1981-02-15"></fx:Object>
        <fx:Object dataField1="data3" dataField2="data3" dob="1956-05-7"></fx:Object>
        <fx:Object dataField1="data4" dataField2="data4" dob="1994-08-25"></fx:Object>
    </s:ArrayList>
</s:DataGrid>

回答2:

You are using an inline item renderer. Think of an inline renderer the same way you would an item renderer in an external file. You will need to re-import mx.controls.Alert in order to use it. Additionally, if you want to call your main application variables from inside the itemRenderer, you need to make them public variables in your main app.

来源：https://stackoverflow.com/questions/10492259/adobe-flex-itemrenderer-making-calculations