What's the equivalent of this Flex MX code in Spark?

Question

What's the equivalent of an inline itemRenderer checkbox element in spark?

<mx:AdvancedDataGridColumn headerText="Eliminar" dataField="eliminar"  width="100" textAlign="center">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox horizontalAlign="center">
                            <mx:CheckBox id="chkEliminar" change="{data.eliminar = chkEliminar.selected}" selected="{data.eliminar}"/>
                            </mx:HBox>
                        </fx:Component>                     
                    </mx:itemRenderer>
                        </mx:AdvancedDataGridColumn>

score 3 · Accepted Answer · answered Mar 03 '11 at 17:06

3

Inline itemRenderers work the same in spark as they did in Halo.

Spark has its own CheckBox component <s:CheckBox> you could use, but you can also continue to use the Halo CheckBox <mx:CheckBox> you've got in your example.

answered Mar 03 '11 at 17:06

Jason Towne

8,014
5
54
69

1

The thing is, if I use the spark checkbox the "data" property I use there is no longer valid. – enon Mar 03 '11 at 17:09
@overmann, This is true. I would just stick with the Halo CheckBox if you have to use inline itemRenderers. Otherwise, look into creating an actual `ItemRenderer` component. Check out http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html for more info. – Jason Towne Mar 03 '11 at 17:14
+! for the first line of your answer. "Inline itemRenderers work the same in spark as they did in Halo." See my answer for a bit more about this if you wanted to use Spark components as renderers to MX Components. – JeffryHouser Mar 03 '11 at 17:20
@Flextras, I added more info in my reply to overmann`s comment as well. +1 to your answer for providing an actual example. :) – Jason Towne Mar 03 '11 at 17:23

score 2 · Answer 2 · answered Mar 03 '11 at 17:18

2

+1 for Jason's answer

Inline itemRenderers work the same in spark as they did in Halo

I will add that if you want to use Spark Components in a renderer, then you either need to implement IDataRenderer interface or use the itemRenderer class. More info here. I would rewrite your existing itemRenderer like this to be Spark:

<fx:Component>
<s:ItemRenderer>
 <s:CheckBox id="chkEliminar" change="{data.eliminar = chkEliminar.selected}" selected="{data.eliminar}"/>
</s:ItemRenderer>
</fx:Component>

For the moment, I'm ignoring the act that binding in an itemRenderer is consdered a bad practice and you really should use the dataChange event to modify the selected values.

answered Mar 03 '11 at 17:18

JeffryHouser

39,401
4
38
59

@Flextras, Out of curiosity, why is binding in an itemRenderer considered bad practice? Not criticizing, just curious. – Jason Towne Mar 03 '11 at 17:22
@Jason Towne It is known to be a drag on performance. Binding is an expensive operation. I assume it relates to the way binding works and how the MXML is translated into ActionScript. With the Flextras AutoComplete, for example, I have fixed most "memory leak" complaints by re-writing client's itemRenderers to not use binding. – JeffryHouser Mar 03 '11 at 17:43

Dan Monego · Answer 3 · 2011-03-04T02:07:38.943

2

Both of the other answers here are good for this case, where there's only one subitem, but if you want the itemrenderer to have a layout like an HBox you need to specify it manually:

<s:itemRenderer>
  <fx:Component>
    <s:itemRenderer>
       <s:layout>
         <s:HorizontalLayout horizontalAlign="center"/>
       </s:layout>
       <mx:CheckBox id="chkEliminar" change="{data.eliminar = chkEliminar.selected}" selected="{data.eliminar}"/>
     </s:itemRenderer>
   </fx:Component>                     
 </s:itemRenderer>

edited Mar 04 '11 at 02:07

answered Mar 03 '11 at 18:08

Dan Monego

9,637
6
37
72

Why use an HBox if he just has one child component? It's overkill. – JeffryHouser Mar 03 '11 at 21:43
@www.Flextras.com Because if he starts adding to the code this will behave the same as the halo components. Without the layout, the renderer means something different from an HBox. – Dan Monego Mar 04 '11 at 02:10

What's the equivalent of this Flex MX code in Spark?

3 Answers3