Itemrenderers in Spark Architecture

Does anyone have suggestions for a good intro to event handling from itemrenderer components to host components in the Spark architecture? Best practices etc. I like Peter Ent's intro to Flex 3 renderers at http://tinyurl.com/5obqlc but I assume some things have changed given the new skin/logic separation.

ItemRenderer's in spark are not SkinnableComponent's so most of that article will likely still apply in spark.
You will likely find this article useful as well:
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS03d33b8076db57b9-23c04461124bbeca597-8000. html

Similar Messages

I've started updating Flare for use with Flex/Spark

Hi,
Flare is a pretty cool actionscript library which allows you to make some pretty great interactive visualisations (or visualizations if you're American) of data. A couple of problems with it though:
It has pretty awful documentation. There's a tutorial that gets too in depth, too quickly and doesn't outline how to get up and running quickly at all, or what form of data is expected. &
It doesn't play all that well with the Spark architecture, making you 'hand draw' things on the nodes of a chart rather than just applying skins.
I'm trying to rectify this by:
Writing a quick start guide to getting up and running with Flare quickly. &
Starting to recode the library to be Flex friendly.
The quickstart guide should get anyone up and running with Flare using the downloadable version there is from them.
The second post has a partially recoded version of Flare to be friendly with Flex. I've worked on it more since then, and will continue to post updates as I get more and more working and cleaned up.
I hope this will be helpful, as Flare has some pretty cool things going for it (and some baffling choices also!).

Yes,you will lose all the music files when updating the firmware. What firmware is on the device now? You will need to do the update on XP SP2 with Windows Media Player 0 & no WMP components.
nikkic wrote:
Hello,I've just bought a new laptop with Vista Home Premium. It is recognising my player but is requesting I download drivers and the installation cd does not work. I have been searching for a solution to this and believe there is a way of updating my player using a computer with XP.Could someone please tell me how to do this?Will I lose all stored music if I do update the firmware?
Thank you!

Skins that effect the host component behaviour.

There was an interesting question that was raised in the pre-release forums about what is the appropriate way to handle animations between the skin and its host. Basically the issue was if there is an animation in the host and another in the skin what would be the best way to code it so that both animations ran in parallel, My thoughts are why not do it all in the skin. this example animates a container by resizing it and centering it in the application.
I figured it would be an interesting topic for those that are trying adding extra component functionality into the skin.
@PD - Maybe you could apply a little of your magic to something like this and add it your blog.
David
The App
=============================================================
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
creationComplete="application1_creationCompleteHandler(event)" width="100%" height="100%">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
menu1.verticalCenter=height/2*-1 + 35;
menu1.horizontalCenter=width/2*-1 + 110;
]]>
</fx:Script>
<s:SkinnableContainer id="menu1" left="10" top="10" width="200" height="50"
skinClass="SkinnableContainerSkin2" backgroundColor="#A16969">
</s:SkinnableContainer>
</s:Application>
=============================================================
The Skin
=============================================================
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" creationComplete="skin1_creationCompleteHandler(event)">
<fx:Declarations>
<s:Parallel id="sizer">
<s:Animate target="{hostComponent}" duration="2000" repeatCount="1">
<s:SimpleMotionPath id="setheight" property="height" valueTo="500"/>
</s:Animate>
<s:Animate target="{hostComponent}" duration="2000" repeatCount="1">
<s:SimpleMotionPath id="setvertical" property="verticalCenter" valueTo="0"/>
</s:Animate>
<s:Animate target="{hostComponent}" duration="2000" repeatCount="1">
<s:SimpleMotionPath id="sethorizontal" property="horizontalCenter" valueTo="0"/>
</s:Animate>
</s:Parallel>
</fx:Declarations>
<fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.SkinnableContainer")]
    ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
        <![CDATA[
import mx.events.FlexEvent;
import mx.core.FlexGlobals;
private var Vert:int;
private var Horz:int;
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                bgFill.color = getStyle("backgroundColor");
                bgFill.alpha = getStyle("backgroundAlpha");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
protected function resizeMe(e:MouseEvent): void
Vert = int(FlexGlobals.topLevelApplication.contentGroup.height/2*-1)+35;
Horz = int(FlexGlobals.topLevelApplication.contentGroup.width/2*-1)+110;
if (hostComponent.height < 51)
setheight.valueTo=500;
setvertical.valueTo=0;
sethorizontal.valueTo=0;
else
setheight.valueTo=50;
setvertical.valueTo=Vert;
sethorizontal.valueTo=Horz;
sizer.play();
protected function skin1_creationCompleteHandler(event:FlexEvent):void
Vert = int(FlexGlobals.topLevelApplication.contentGroup.height/2*-1);
Horz = int(FlexGlobals.topLevelApplication.contentGroup.width/2*-1);
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor id="bgFill" color="0x00DDDD"/>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" click="resizeMe(event)">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Skin>

This is a good question.
There's no hard and fast rule to apply which says "this belongs in the skin" vs. "this belongs in the component". Similarly, there are also no hard and fast rules around when to use a the new skinning architecture vs. just creating a custom component. Just do whatever you feel comfortable with and makes your job easier. At the end of the day, it's about productivity and not living up to ideals. That said, there are probably some easier and more logical ways to do some things.
On the skinning architecture vs. custom component debate, with a SkinnableComponent we have a clear separation of the component properties and behavior on one side and the look and feel of the component on the Skin side. Also, there's a clear contract we use to talk back and forth to one another. The reason for the separation between the Skin and the SkinnableComponent is so that we can have one Button SkinnableComponent and multiple Skins for that Button which all tweak the visual appearance of it.
It doesn't make sense for every component to be skinnable. If you know what your component is going to be and look like and don't need the extra flexibility skinning provides, then you can get rid of the extra overhead that skinning requires (like having 2 classes). An example custom component is:
<s:Group>
<s:Rect>
</s:Rect>
<mx:Image src="..." />
<s:Panel skinClass="myCustomSkinClass">
</s:Panel>
</s:Group>
If you want more flexibility and want the ability to easily change the look and feel of the component (i.e. skin it), then you'd extend SkinnableComponent, fill out the skinning lifecycle methods, and create a default Skin for its appearance.
Now, when you're building a SkinnableComponent, there's always a question of what to put in the component vs. what to put in the skin. In general, we try to put the core properties and behaviors in the component and anything visual in the skin. However, another guideline to consider is whether all skins would want this behavior. If so, then it makes sense (and makes your life easier) to put it in the SkinnableComponent rather than the Skin. We do this in the framework for components like VSlider, where the logic for positioning the y-axis of the thumb is in the component and not the skin, even though it's a "visual" thing. We also have discussed how we would build up a ColorPicker component, and I think the way we would go about it is by putting a lot of the "visual" logic in the component because otherwise we'd have to duplicate it across all skins.
Now, the other question you guys are asking here are "when do I bake effects (or any behavior) in to the component (either in the skin or in the SkinnableComponent AS class) vs. when do I declare effects alongside the component". Again, I think the answer to that is whether you want all your components to have this behavior. If that was the case, then I'd lose no sleep baking it in to the component. However, if it's not the case, then I'd make the end-developer delcare it when they use your component, like:
<s:MyCustomComponent id="myComponent" />
<s:Resize id="resizer" widthTo="100" heightTo="50" target="{myComponent}"/>
I would think most of the time, you probably wouldn't want to bake an effect like that in to the component, especially because it has some sizing information on it. However, we have some effects baked in to some of the framework components, like when the thumb of a Slider moves around due to someone clicking on the track. I think it's fine that it's baked in to the component, but I do think it should probably be stylable so that a user can customize it (that's on our list of lower-priority things to do btw).
The framework has definitely evolved. I think we started out with a more purist attitude and wanted a clear separation between the skin and the component. However, as we built out components, we realized it's not always practical to do that. Similarly, we wanted our skins to be pure MXML; however, for usability reasons, we decided that our skins should be styleable, and that requires a little bit of ActionScript code. Border is a great example where it doesn't really follow a lot of these guidelines, but it's just a styleable component; however, this component makes other people's jobs easier. At the end of the day, it's about productivity and usability, and hopefully the Spark architecture is a step in the right direction.
Anyways, I hope that helps some. These are just some guidelines. As people play around with the architecture more, I'm sure some other people will have some good advice to share as well.
-Ryan

How to implement container with dividers between elements?

What is the correct way to implement custom container with dividers between element in Flex 4 Spark architecture? In Flex 3 I would add dividers in rawChildren array and in updateDisplayList function I would arrange position of dividers and children. I can't do this now because there is no rawChildren and I can't add dividers as elements, because dividers are internal details of control and they should not be available to user. I thought to add second group with dividers, but the layout of splitters depends on the layout of actual content. With new model of separated layouts for Groups I don't know how do this correctly.
Thanks, Aleksey

What is the correct way to implement custom container with dividers between element in Flex 4 Spark architecture? In Flex 3 I would add dividers in rawChildren array and in updateDisplayList function I would arrange position of dividers and children. I can't do this now because there is no rawChildren and I can't add dividers as elements, because dividers are internal details of control and they should not be available to user. I thought to add second group with dividers, but the layout of splitters depends on the layout of actual content. With new model of separated layouts for Groups I don't know how do this correctly.
Thanks, Aleksey

Update Sdk in Flash Catalyst

Hi Is there any way to update sdk in Flash catalyst like in Flash Builder.
I am using Flash Catalyst build of Max and I want to make use of it using new spark architecture and it is still generating old code.
I tried to change sdk from root but it gives me error.
Sumit Arora

Hey Sumit,
In the public beta we'll be releasing with the most up to date version of the Flex SDK. There's no way to actually change the SDK in the MAX build unfortunately.
=Ryan
[email protected]

Flex best practices

Im new to Flex but I have plenty of experience using traditional webdev technologies (HTML, CSS, JS/AJAX, PHP). I know that when you build a web app using these technologies, it's considered best practice to use event listeners rather than event handlers in JS, and to place all your JS in an external file and reference it in your HTML page. I've been watching several videos on Lynda.com on Flash Builder 4 and Flex, and in all the videos, the author places most of the Actionscript in the MXML file while referencing a few custom Actionscript classes. With that said, what do Flex developers typically do?

In Flex 3, it is considered best practice to use the Presentation Model pattern (as advocated by Martin Fowler), where you extract the view states and view logic.
A PM is a simple ActionScript class that extends EventDispatcher (for Data Binding purposes).
[Bindable]
public class SalesProjectionPM extends EventDispatcher {
     // Collection of QuarterlySales objects
     public class quarterlySales:ArrayCollection;
     // Event handler
     public function viewSwitchHandler(event:MouseEvent):void {}
You can then inject this PM into an MXML view using an IoC container framework and bind your view to the corresponding PM for both your components dataProviders and events. If you have a central data model, you can inject it into your PM and bind to it.
In Flex 4, you already have the separation of view and logic that comes with the new Spark Architecture. You have an ActionScript component that contains the view states and view logic (including event handlers) on the one side. And you have a MXML skin that materializes the UI on the other.
You add/remove event handlers in the partAdded(), partRemoved() overriden methods. If you have a central data model, you can inject it into your ActionScript components.

Rethinking Flex Animations: [Bindable] causing intense application lag

Hey,
There is a big difference in animation/effect performance across computers in Flex. On our macs (Mac Pro desktop, Macbook Pro, MacBook), everything is fairly smooth (Firefox and Safari). On any Windows XP (Firefox or IE), alpha and translation animations/effects are very choppy, not to mention rotation or anything more complex: a TweenMax alpha tween from 1 to 0 in 1 second only uses 3-4 frames, instead of 24-60. On Windows Vista, it's like 2 frames (this is on a Panel 500 x 500). Same with tweening x and y. Same with running Andrew Trice's KeyFrame and MotionPath example, very choppy on anything but a mac, especially if you have a full blown application with 50+ components on the stage at once.
I think this might have something to do with the event dispatching going on with animating properties. When you tween the "alpha" on a UIComponent for 1 second, it can dispatch more than 20 "alphaChanged" events, even when there are no listeners for it. Add in a position animation, and you easily have 50+ events being dispatched for every item animating on the screen, plus calls to invalidateProperties(), invalidateDisplayList(), etc. (setting UIComponent.suspendBackgroundProcessing to 'true' doesn't help), plus all the background binding execution flex generates in the background. Tons of things pure Actionscript doesn't use when animating.
In pure Flash/Actionscript, when you do animations (like those found on Template Monster website templates), they are VERY smooth, even on Windows Vista. The only difference between these animations and those in Flex is:
1) Flash is not dispatching any events when properties change.
2) Flash is not calling any invalidation methods when properties change.
Granted, invalidation and binding is core to Flex and I love it dearly. But if there was/is a way to prevent any binding updates (event dispatching), and calls to even any invalidation methods WHILE ANIMATIONS ARE RUNNING, I think animations in Flex would be just as smooth as those in Flash and pure Actionscript, on all computers.
Question is, is this possible? Is it possible to say "don't update any bindings on these objects until this animation is complete"? If not, is Ely or others involved in the new Spark architecture willing to take on such a task? Otherwise it's pointless to use anything but the simplest animations (changing alpha or color on a 20x20 ButtonSkin) because its choppiness will just detract from the User Experience.
Thanks for your help.
Lance

Hi Lance,
I know you're asking about performance of non-Flex tweening engines, but I'll answer from my Flex 4 effects perspective, since that's what I know. All of the tweening engines, including Flex 4 effects, use a similar approach, however; they just animate the properties of Flex objects. So they would all share similar performance characteristics in general.
The performance of the animations is highly dependent on what's happening in your application. I'm surprised you're seeing as little as 2-4 frames per second, but I would bet there's a lot happening in your app at that time, because it's not hard to achieve much higher frame rates (like 30-60 fps) in very simple situations.
Data binding and layout could be contributing to the performance. I'm not sure how much data binding itself adds (just sending out the events when properties change), but it may be what the listeners are doing with that information that is bogging it down. That is, maybe sending out the event for alpha changing doesn't cost that much, but the listeners may be doing some processing on that change, or any change in general, that is coming at a cost to the system.
There is no flag to disable binding events that I know of. There is a property on Flex effects that disables some event processing (suspendBackgroundProcessing), but it's a bit of a heavy hammer and I wouldn't recommend it as a general approach. (In fact, I'd like to ditch that property since it has some odd consequences at times).
Layout will also contribute to the problem, depending on what's happening. For example, if you are resizing a button in a vertical layout, then the layout will want to shift around the sibling objects to adjust to the size change. That is probably what you want to happen in the UI, but it comes at a cost since the layout has to recalculate everything for the container on every animation update.
There is a flag in Flex effects to reduce the processing of layout in particular: disableLayout=true. This tells Flex to avoid doing layout on the target object's container during the course of the effect. Again, it's a heavy tool to wield, but can be the right thing to do in some situations.
There might be a better general approach we could look into eventually, such as running animations that are more visual than functional (e.g., resizing a button's graphical assets without sending out events as the button changes), but that'll have to come after this release, in which we were focusing on getting the architecture right for spark and flex 4 effects.
In the meantime, I'd play with a profiler and see where you're getting bogged down with your animations; I've seen some pretty slick stuff in non-trival UIs, so the fact that you're seeing such low frame rates means there might be something going on in your app that you could fix rather than waiting for us to think about how to lighten the load for animations.
For example, if you're seeing poor performance for doing a cross-fade between one screen and another, fading out all of the current components and fading in the new components, consider fading alpha on just the container itself. Or using the new CrossFade effect. Once you know more about where your performance issues are coming from, it's easier to figure out how to fix or workaround them in your application.
Chet.

Constructing a List inside @Entity

Dear folks,
I have an entity bean:
@Entity
public class EmployeeGroup {
    @ManyToMany
    private List<Employee> employees;
}when the entity is not yet managed, the employees list is null.
To get around this, I've put the following into the getter:
public List<Employee> getEmployees() {
    if (employees == null) {
        employees = new ArrayList<Employee>();
    return employees;
}I was wondering if that is proper way to do that. Any comments appreciated.
Regards

Yes, I had recently determined that the cause was the selectionChange firing on the outer list.
To answer your question, there really isn't a good reason I can't. When I started learning the Spark architecture, I challenged myself to forego the halo components altogether, and have been building with that in mind.
Its really funny, I was looking at that post on your blog yesterday, and I downloaded the source, and couldn't understand how the thing was built.
So, it looks like I need to do 1 of 2 things.
1. Figure out a way to change the hit area for the List component, or otherwise swallow the selectedIndexChange on the parent List.
or
2. Re-build using the mx:Tree or figure out how yours works.

How Do You Populate A Spark List Control With An Array?

Hello, all,
Sorry to come accross so frustrated, but how in the name of God do you populate a Spark list control with the data in an array? You used to be able to do this with the mx:List control, but the guys developing Flex just had to make things more difficult than they need to be! I am more of a code purist and prefer doing things the way they have been done for decades, but apparently nothing can ever stay simple!
I simply want to populate a list control with an array and this shouldn't be rocket science! I found out that I must use a "collection" element, so I decided that an arrayCollection would be best. However, after searching Adobe's documentation about arrayCollections, I am lost in a black hole of data binding, extra lines of code just to add a new element, the need to sort it, etc...!
Here is my code:
var pendingArray:ArrayCollection = new ArrayCollection();
for ( var i:int = 0 ; i < queue.length ; i++ )
     var item:UserQueueItem = queue[i] as UserQueueItem ;
     if ( item.status == UserQueueItem.STATUS_PENDING )
     pendingArray.addItem({label:item.descriptor.displayName,descriptor:item.descriptor});
Here is the relevant MXML:
<s:VGroup>
     <s:List id="knockingList" width="110" height="100"/>
</s:VGroup>
I'm not getting any errors, but the list is not populating.
I have seen several examples where the arrayCollection is declared and populated in MXML:
        <mx:ArrayCollection id="myAC">
            
            <fx:Array id="myArray">
                <fx:Object label="MI" data="Lansing"/>
                <fx:Object label="MO" data="Jefferson City"/>
                <fx:Object label="MA" data="Boston"/>
                etc...
           </fx:Array>
        </mx:ArrayCollection>
That may be fine for an example, but I think this is a rare situation. Most of the time I would image that the arrayCollection would be created and populated on the fly in ActionScript! How can I do this?
Thanks in advance for any help or advice anyone can give!
Matt

In your post it seemed like you were trying to take care of many considerations at once: optimization, design, architecture. I would suggest you get something up and running and then worry about everything else.
If I use data binding, then I will probably have to declare the arrayCollection as a global variable and then I'll have to write 100 or so extra lines of code to addItem(), removeItem(), sort(), etc... It just seems like too much overhead.
I believe you may have some misconceptions about databinding in general. You won't have to make it a global variable and you certainly won't need an extra 100 lines of code. If you did this forum would be a very , very quiet place.
I don't want to use data binding because the original array is refreshed often and there is one function called by an event that re-declares the arrayCollection each time, populates it with the array, and then sets it as the list's dataprovider.
That is the beauty of the ArrayCollection, it can handle the updates to its source Array. I don't know if you need to redeclare the ArrayCollection, resetting the source to the new Array allows everyone involved to keep their references so you don't have to worry about any "spooky" stuff going on.

Extending a component which already extends a spark list ItemRenderer

Hello everyone,
I have the following situation: Im displaying lists of very similar data objects (they extend the same parent) so in order to avoid a lot of changes to many itemrenderers (if i need to change something in the common properties) when displaying this data, i defined a spark list ItemRenderer (in MXML) which displays the common properties (file called BaseRenderer.mxml):
<s:ItemRenderer>
     //in the script section i override the set data property
     //some MXML labels, checkboxes, etc
</s:ItemRenderer>
Then i created a specific itemrenderer which extended it (file SpecificRenderer.mxml):
<model:BaseRenderer>
     //again i override the set data property
     //some ADITIONAL MXML labels, checkboxes, etc
</model:BaseRenderer>
When i run the app, and when the specific renderer is used, it works (no errors are thrown) , but it only shows the content of specific renderer, nothing from base renderer is visible. Is this the right way to do this, or do i have to override some additional stuff in my specific renderers?
Thank you.
One more thing, i just noticed, if i remove all MXML tags from specific renderer, the content from base renderer becomes visible, seems as if specific content overrides base content. Is there a way to add mxml tags into the specificrenderer?

Yes i suspected them to be merged, and you gave me a great idea. As you say this behavior is true across all mxml defined components, not just itemrenderers. I want to avoid actionscript renderers because i dont (and wont) have any performance issues anyway and i like flexibility in design view, so instead i found another solution which i slightly modified. Some spark components inherit property mxmlContent, which you can override. This is what i came up with in the end: I added the property override into specific renderer and everything is shown as expected (because base elements are merged with the ones from extended component).
override public function set mxmlContent(value:Array):void {
                                        var adding:Boolean = true;
                                        var index:int = 0;
                                        while (adding) {
    var element:IVisualElement = null;
    try {          element = super.getElementAt(index); } catch(e:Error) {          }
    if ( element != null ) {
       value.push(element);
       index += 1;
    else
      adding = false;
                                        value.reverse();
                                        super.mxmlContent = value;

Updating the dataprovider of a datagrid with itemrenderers throws renderers

Hello all,
I've run into a problem that I can't seem to figure out. I have a datagrid that is bound to an arraycollection as the data provider. A few of my DataGridColumns have itemrenderers. The renderers work great on the first run, but once the dataprovider is updated, my datagrid renderers fall apart.
My renderers basically highlight cell items that fall into a particular range. Interestingly, if I have an itemrenderer attached on any dataGridColumn, I get a few repeating/identical rows and itemrenderes that are active in places that they shouldn't be once the dataprovider is updated. Has anyone run into this? How did you solve this? Thanks in advance!!
Mike

Another way to create itemRenderer for datagrid is to have a custom components that implements these objects
mx.controls.listClasses.IDropInListItemRenderer,mx.controls.listClasses.IListItemRenderer, mx.core.IFactory
For example
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.controls.listClasses.IListItemRenderer, mx.core.IFactory">
private var _data:Object;
private var _listData:BaseListData;
public function newInstance():*
return new myItemRenderer; // name of your renderer
public function set data(value:Object):void
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
[Bindable("dataChange")]
public function get data():Object
public function set listData(value:BaseListData):void
public function get listData():BaseListData
</s:SkinnableContainer>

Flex Spark Datagrid - Scalable (font size) with No scroll Bars

I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease.
Is there a way to listen for the size change of the DataGrid?
I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize.
Any suggestions?

I've pasted as much code as I can legally can. What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
Else, I tried:
protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
== THIS IS All I can Post ==
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:components="components.*"
     viewSourceURL="srcview/index.html">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.events.ResizeEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.xml.SimpleXMLDecoder;
        import mx.utils.ArrayUtil;
        import mx.utils.ObjectUtil;
        import spark.components.ResizeMode;
        import spark.effects.Resize;
        // Skin Colors
        private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
        private const ROLL_OVER_COLOR:int = 0x6D9960;
        private const SELECTION_COLOR:int = 0x668F59;
        private const TEXT_FONT_SIZE:int = 11;
        private const TEXT_COLOR:int = 0x080808;
        private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
        // First column width
        private var collectiveFirstColumnWidth:int = 160;
        private var collectiveValuesColumnWidth:int = 50;
        // XML data
        [Bindable] private var portfolioSummary1:XMLList;
        [Bindable] private var reconstructedAC:ArrayCollection;
        private function convertXmlToArrayCollection(file:String):ArrayCollection {
            var xml:XMLDocument = new XMLDocument(file);
            var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
            var data:Object = decoder.decodeXML(xml);
            var array:Array = ArrayUtil.toArray(data);
            return new ArrayCollection(array);
        private function convertToAC():void {
            var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
            trace(ObjectUtil.toString(ac1));
            //reStructureAC(ac1);
        private function restructureXMLIntoHierarchicalAC():void {
        private function addProperty(obj:Object, attribute:String, value:String):Object {
            var o:Object = obj;
            o[attribute] = value;
            return o;
        protected function httpservice1_resultHandler(event:ResultEvent):void
            portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
            trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
            trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
            //dg.dataProvider = new XMLListCollection(portfolioSummary1);
            //dg.requestedRowCount = dg.dataProviderLength;
        protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
        protected function vgroup1_resizeHandler(event:ResizeEvent):void
            (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
    ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
        <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
        <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
        <s:XMLListCollection id="headXMLListCol"
            source="{psr1.children()}" />
        <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
            resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
    </fx:Declarations>
    <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
        
        <components:ExpandableDataGrid5 id="dg"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            skinClass="skins.ResizableDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        headerRenderer="itemRenderers.HeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <components:dataProvider>
                <s:ArrayCollection>
                    <fx:Object dataField1="data1" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data3" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data5" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data7" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data9" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data11" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayCollection>
            </components:dataProvider>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow >
            <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            <s:Spacer width="100%" />
            <s:ButtonBar click="convertToAC()">
                <mx:ArrayCollection>
                    <fx:String>Convert to AC</fx:String>
                    <fx:String>CPS</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
            <s:ButtonBar click="restructureXMLIntoHierarchicalAC()">
                <mx:ArrayCollection>
                    <fx:String>Parse XML</fx:String>
                    <fx:String>15% POV</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg2"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data16" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg3"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data18" dataField2="data2" dataField3="data3" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg4"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer" />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
    </s:VGroup>
</s:Application>
ExpandableDataGrid5.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resizableColumns="false"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
            /*import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
            /* protected function datagrid1_addedToStageHandler(event:Event):void
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                /*                stage.align = StageAlign.TOP;
                 this.width = stage.stageWidth;
                this.height = stage.stageHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
You can Check other ExpandableDataGrids:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            editable="false"
            width="100%"
            >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                //event.stopImmediatePropagation();
                if (event.oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (event.oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                minWidth = measuredMinWidth;
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredMinHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
OR
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
             import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
        ]]>
    </fx:Script>
</s:DataGrid>

How to remove the use of virtual layout on a Spark DataGrid

Hi!
I have the following spark data grid:
<s:DataGrid id="listagem"
            x="6"
            y="6"
            width="640"
            height="400"
            skinClass="skins.dataGrid.ConsusListagemDataGridSkin"
            dataProvider="{imoveis}">
     <s:columns>
          <s:ArrayList>
               <s:GridColumn headerText="IMÓVEL"
                             itemRenderer="components.itemRenderers.ListagemImovelItemRenderer"/>
               <s:GridColumn headerText="LOCALIZAÇÃO"
                             dataField="comuna"
                             width="130"/>
               <s:GridColumn headerText="PREÇO"
                             labelFunction="{function (item:Object, column:GridColumn):String {return '$ '+item.preco;}}"
                             width="90"/>
               <s:GridColumn headerText="COMPARAR"
                             width="70">
                    <s:itemRenderer>
                         <fx:Component>
                              <s:GridItemRenderer>
                                   <s:CheckBox verticalCenter="0" horizontalCenter="0"/>
                              </s:GridItemRenderer>
                         </fx:Component>
                    </s:itemRenderer>
               </s:GridColumn>
          </s:ArrayList>
     </s:columns>
</s:DataGrid>
My problem is that, if I select the check box on one item having a considerable amount of rows, then if I scrool down another item will appear checked even if I never clicked it.
This is due to the use of virtual layout by the spark data grid, but I just can't find where to tell the data grid to not use virtual layout.
Can anyone help me, please?
Thanks,
Jorge

Hi kevinklin!
Thanks for your answer.
I tried to do as you told but I never get the prepare method to be executed.
I just added this to the GridItemRenderer:
public override function prepare(willBeRecycled:Boolean):void
     Alert.show('BLA OUT');
     if (willBeRecycled)
          Alert.show('BLA IN');
but I never get to see any alert box.
Best regards,
Jorge

Spark DataGrid - Turn off separators (grid lines) while using Grid itemRenderer?

I have a spark dataGrid. We have to use an itemRenderer to format numbers and column colors. When I apply a Data Grid Skin to remove the separtors (grid lines), the grid lines remain? It seems you can't have an itemRenderer and a Grid Skin at the same time ?? That sounds kind of foolish, however that's what I'm seeing?!?!
So, how can I get rid of the grid lines (separators) while using itemRenderers as well?

See http://forums.adobe.com/message/3795887.

Spark DataGrid Issue

I'm working with the new Spark DataGrid, and I understand it's still a work in progress. I've also created a bug in the Adobe bug system. However, I want to be sure that I'm not overlooking something.
Here is an example that illustrates the issue. If I create an itemRenderer for a column in a dDtaGrid, it takes 2 clicks to trigger the click event and 3 clicks to trigger the doubleClick event, if you click on the column with the itemRenderer. This happens about 95% of the time. Occasionally, it works as expected, but that's a rarity. So the question is, am I doing something wrong in the use of itemRenderers.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:DataGrid x="33" y="57" requestedRowCount="4" textAlign="center" click="Alert.show('Clicked')">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Name" width="75">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{data.dataField1}" left="5" paddingTop="10" paddingBottom="5"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column2" width="75"/>
<s:GridColumn dataField="dataField3" headerText="Column3" width="75"/>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="John" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="Ryan" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="Kyle" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="Edward" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid></s:Application>

I have approximately the same problem : I want to listen double click (doubleClick or gridDoubleClick) on a spark datagrid.
The double click event is always dispatched when I double-click on a column whose item renderer is a textArea (even with doubleClickEnabled=false).
The double click event is SOMETIMES dispatched when I double-click on a column whose item renderer is an image or a label :
1. When I double-click for the first time on the label renderer : it gives focus to datagrid and select item but does not dispatch doubleClick
2. When I double-click on the textArea colum, then on the Label column of the same row, doubleClick is well dispatched
3. When I double-click on the textArea colum, then on the Label column of a different row, doubleClick is not dispatched
4. when I double-click on the label column after double-clicking on another row in the Label column, doubleClick is well dispatched
I think it's the same behaviour with simple click event.
Do you think spark datagrid is not stable enough and we should use mx datagrid instead ?
Here is the code :
<s:DataGrid dataProvider="{arrayCollection}" doubleClickEnabled="true" doubleClick="trace(event)" gridDoubleClick="trace(event)">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:Label text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:TextArea text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

Itemrenderers in Spark Architecture

Similar Messages

Maybe you are looking for