To start with, you need to be careful using repeater to replace a
DataGrid. DG and the other list-based controls are optimized for
rendering performance in the flash palyer. Repeater will instantiate as
many items as there are in the dataProvider unless you control the
count. You will find that rendering 10-20 elements is acceptable, but
rendering 100 is not.
There are ways to mitigate this, including using recycleCildren, and
using a paged navigation instead of scrolling.
That said, for many applications Repeater is much easier to use than a
DG with a custom item renderer. Below is some example code. One thing
that makes working with repeater much easier is to build a custom
component, and repeat that. The code below show that.
Tracy
Goal: Display a list of items using a complex display for each item, and
have each of those items behave like a menu element and respond to a
click anywhere on the item by running a handler function.
One solution is to use a Repeater with a custom component
In the main app or component, declare the Repeater, and the click
handler function.
<mx:Application ...
<mx:Script><![CDATA[
import MyRepeaterItem;
...
private function onRPItemClick(oEvent:Event):void
{
var xmlItem:XML = XML(oEvent.target);
}//onRPItemClick
]]></mx:Script>
<mx:VBox ...>
<mx:Repeater id="rp" dataProvider="{_xmlData}" ...>
<!-- Note we pass in the entire currentItem, and define a click
handler -->
<MyRepeaterItem xmlItem="{rp.currentItem}"
itemClick="onRPItemClick(event)" .../>
</mx:Repeater
</mx:VBox>
</mx:Application>
And in the component, MyRepeaterItem.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox mouseChildren="false" buttonMode="true" click="onClick(event)"
>
<!-- The metadata tag below allows us to define an itemClick handler
in mxml, as in the code above -->
<mx:Metadata>
[Event(name="itemClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Script><![CDATA[
[Bindable]private var _xmlItem:XML;
/** Setter function */
public function set xmlItem(xml:XML):void
{
_xmlItem = xml;
//do any special, non-bound ui stuff you want
}//set xmlItem
/** Getter function */
public function get xmlItem():XML
{
return _xmlItem;
}//get xmlItem
/** Outer VBox Click handler function */
private function onClick():void
{
dispatchEvent(new Event("itemClick",false); //we do not need/want
this event to bubble
}//onClick
]]></mx:Script>
<!-- Now declare the Item UI -->
<mx:Text id="lbDescription" text="[EMAIL PROTECTED]"
width="100%" height="100%" />
</mx:HBox>
________________________________
From: [email protected] [mailto:[EMAIL PROTECTED] On
Behalf Of txakin
Sent: Tuesday, April 15, 2008 11:17 AM
To: [email protected]
Subject: [flexcoders] mx:Repeater vs mx:DataGrid
Hi all
I have one component to show one list of movies using DataGrid.....the
source is like that:
<mx:DataGrid id="grdMovies" height="199" dataTipField="synopsis"
click="detailMovie()" dataProvider="{model.listMovies}" top="231"
left="10" width="95%">
<mx:columns>
<mx:DataGridColumn showDataTips="true" headerText="Title"
dataField="title"/>
<mx:DataGridColumn headerText="Director" dataField="director"
labelFunction="showDirectorName"
sortCompareFunction="ordenarPorDirector"/>
<mx:DataGridColumn headerText="Main Actor" dataField="mainActor"
labelFunction="showActorName"/>
<mx:DataGridColumn headerText="Year" dataField="movieYear"/>
</mx:columns>
</mx:DataGrid>
My result is succes, but i would like to use one repeater and see the
posibilities o this component....
If someone can give me some advices or some examples.....Please....see
that my DataGridColumn have some labelFunction and dataField and i would
like to have using the repeater.
Thanks in advance.
