0 Replies Latest reply on Mar 13, 2009 4:24 AM by Sankar Kethineni

    Custom components inside  ItemRenderer component

    Sankar Kethineni Level 1
      Hi All,

      As we all know that, we can define the itemRenderer as a component class or file i.e whether it can be in MXML or in ActionScript and with the help of containers say HBox/VBox/Canvas etc controls can be lay down, values can be displayed using the data property as shown below.

      <?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 initData:ArrayCollection = new ArrayCollection([
      {task:"meet ravi on sunday",category:"personal",priority:"Low",dueDate:"09-mar-09"},
      {task:"buy a book",category:"friends",priority:"Medium",dueDate:"07-mar-09"},
      {task:"play cricket",category:"friends",priority:"Low",dueDate:"15-mar-09"},
      ]);
      ]]>
      </mx:Script>

      <mx:List dataProvider="{initData}" width="50%" height="50%"
      itemRenderer="components.ItemRendererExample"/>

      </mx:Application>

      components.ItemRendererExample file

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:dueDate="components.*">

      <mx:HBox width="100%" paddingRight="15">
      <mx:Label text="{data.task}" width="100%"/>
      <mx:Label text="{data.dueDate}"/>
      <mx:Label text="{data.priority}"/>
      <mx:Label text="{data.category}"/>
      </mx:HBox>

      </mx:Canvas>

      Now my question is instead of displaying all the values in component file can I display 2 of the values in component file and the 2 other values in another component file and finally these components can be included in the main component file(ItemRendererExample)? as shown below

      <mx:List itemRenderer = "components.ItemRendererExample" ..../>


      ItemRendererExample

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*">

      <mx:HBox width="100%" paddingRight="15">
      <comp:Comp1/>
      <comp:Comp2/>
      </mx:HBox>

      </mx:Canvas>

      Comp1

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:HBox width="100%" paddingRight="15">
      <mx:Label text="{data.task}" width="100%"/>
      <mx:Label text="{data.dueDate}"/>
      </mx:HBox>

      </mx:Canvas>

      Comp2

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:HBox width="100%" paddingRight="15">
      <mx:Label text="{data.priority}"/>
      <mx:Label text="{data.category}"/>
      </mx:HBox>

      </mx:Canvas>

      I know that, in this case we can't directly use the data property as {data.task} in the components which are outside of ItemRendererExample component file. Is it possible by doing ant other extra things?

      Any help can be appreciated. It can be either in MXML or ActionScript


      Thanks
      -sankar