how to access the listData property in item renderer for datagrid in flex 4

问题

I have a custom datagrid. I am passing value of hslider through a property criteria into it. I have an external itemrenderer for this datagrid which extends GridItemRenderer. I want to change the item renderer dynamically based on this property criteria. To access a property from parent component which is 'criteria' I want to access the listData property. For that this custom datagrid implements the IDropinItemRender. But the value of listData coming as null.In my main application I am using this datagrid as below.

<components:Mydatagrid dataProvider="{ac}" criteria="{hslider.value}">
<components:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name" headerText="Name"></s:GridColumn>
            <s:GridColumn dataField="age" headerText="Age"></s:GridColumn>
            <s:GridColumn dataField="hair" headerText="Hair" itemRenderer="renderer.GridInlineDynamicRenderer"   />
        </s:ArrayList>
    </components:columns>
</components:Mydatagrid>

This is my item renderer code. The listData property in line no2 of set data function is null.

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                clipAndEnableScrolling="true" implements="mx.controls.listClasses.IDropInListItemRenderer" >
<fx:Script>
    <![CDATA[
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        import components.Mydatagrid;
        private var _listData:BaseListData;
        public function get listData() : BaseListData
        {
            return _listData;
        }
        public function set listData( value:BaseListData ) : void
        {
            _listData = value;
        }
        protected function button1_clickHandler(event:MouseEvent):void
        {
            dispatchEvent(new Event('hairEvent',true));
        }
        override public function set data(value:Object):void
        {
            super.data = value;
            var myListData:DataGridListData = DataGridListData(listData);
            var criteria:Number = (myListData.owner as Mydatagrid).criteria;
            hairClr.setStyle('color',data.hair);
            if(data.age < criteria)
                alpha = 0.4;
            else
                alpha = 1;
        }
    ]]>
</fx:Script>

<mx:HBox> 
    <s:Button click="button1_clickHandler(event)" label="Button" />
    <s:Label id="hairClr" text="Color" />
</mx:HBox>

</s:GridItemRenderer>

The listData is coming null here. But when I use item renderer with list component, it works. The code of item renderer is same except that for list the item renderer extends the HBox. The link to this code is this http://www.adobe.com/devnet/flex/articles/itemrenderers_pt3.html. I am just trying to implement same with datagrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
    <![CDATA[
        import mx.controls.listClasses.BaseListData;

        import components.MyList;

        private var _listData:BaseListData;
        public function get listData() : BaseListData
        {
            return _listData;
        }
        public function set listData( value:BaseListData ) : void
        {
            _listData = value;
        }
        protected function button1_clickHandler(event:MouseEvent):void
        {
            dispatchEvent(new Event('hairEvent',true));
        }
        override public function set data(value:Object):void
        {
            super.data = value;
            var criteria:Number = (listData.owner as MyList).criteria;
            hairClr.setStyle('color',data.hair);
            if(data.age < criteria)
                alpha = 0.4;
            else
                alpha = 1;
        }
    ]]>
</fx:Script>

    <s:Button click="button1_clickHandler(event)" label="Button" />
    <s:Label id="hairClr" text="Color" />
</mx:HBox>

来源：https://stackoverflow.com/questions/13109821/how-to-access-the-listdata-property-in-item-renderer-for-datagrid-in-flex-4

标签

apache-flex

itemrenderer