Hey All, I'm trying to reproduce a mx:DataGrid in the s:DataGrid
Have I discovered a bug, or am I missing something... Flex 4.1 grid works correctly.. Spark grid does NOT... <?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" creationComplete="init(event)" xmlns:skins="skins.*" > <s:layout> <s:HorizontalLayout /> </s:layout> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|DataGrid s|VScrollBar { skin-class: ClassReference("skins.SDGverticalScrollBar"); } </fx:Style> <fx:Script> <![CDATA[ *import* mx.events.FlexEvent; *import* spark.skins.spark.DefaultItemRenderer; *protected* *function* init(event:FlexEvent):*void * { *for* (*var* i:Number=12; i>=0; i--){ arrColl.addItem({count:i}); } } *private* *function* list_itemRendererFunction(item:Object):ClassFactory { *var* classFactory:ClassFactory = *new* ClassFactory(DefaultItemRenderer); * /* switch (item.type) { case "employee": // cla = EmployeeItemRenderer; break; case "manager": // cla = ManagerItemRenderer; break; default: break; } */* *return* classFactory; } ]]> </fx:Script> <fx:Declarations> <mx:ArrayCollection id="arrColl" /> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Panel title="Sparks DataGrid ( Hero 4.5 )"> <s:DataGrid id="sdg1" dataProvider="{arrColl}" height="175" width="200"> <s:columns> <s:ArrayList> <s:GridColumn id="sGC1" dataField="count" headerText="Count"> <s:itemRenderer> <fx:Component> <s:GridItemRenderer height="22" > <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states> <s:Label fontWeight="normal" fontWeight.hovered="bold" text="{ data[outerDocument.sGC1.dataField]}" /> </s:GridItemRenderer> </fx:Component> </s:itemRenderer> </s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid> </s:Panel> <mx:Spacer width="50" /> <s:Panel title="Flex 4.1 DataGrid"> <mx:DataGrid id="dg1" dataProvider="{arrColl}" verticalScrollPolicy="on" sortableColumns="false" selectable="true" width="200"> <mx:columns> <mx:DataGridColumn id="df1" dataField="count" headerText="Count"> <mx:itemRenderer> <fx:Component> <s:MXDataGridItemRenderer height="22"> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states> <s:Label fontSize="12" fontSize.hovered="24" fontSize.selected="24" fontWeight.selected="bold" text="{data[outerDocument.df1.dataField]}" /> </s:MXDataGridItemRenderer> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </s:Panel> <!-- <s:Panel title="Sparks/MX Mixed DataGrid ( Hero 4.5 )"> <s:DataGrid id="smxdg1" dataProvider="{arrColl}" variableRowHeight="true" height="175" width="200"> <s:columns> <s:ArrayList> <s:GridColumn id="smxGC1" dataField="count"> <s:itemRenderer> <fx:Component> <s:MXDataGridItemRenderer height="22" > <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states> <s:Label fontSize="12" paddingTop="5" paddingBottom="5" fontSize.hovered="24" fontSize.selected="24" fontWeight.selected="bold" text="{1}" /> </s:MXDataGridItemRenderer> </fx:Component> </s:itemRenderer> </s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid> </s:Panel> --> </s:Application> <?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark VScrollBar component. The thumb and track skins are defined by the VScrollBarThumbSkin and VScrollBarTrackSkin classes, respectively. @see spark.components.VScrollBar @see spark.skins.spark.VScrollBarThumbSkin @see spark.skins.spark.VScrollBarTrackSkin @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library:// ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; minWidth="15" minHeight="35" alpha.disabled="0.5" alpha.inactive="0.5" > <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [*HostComponent*(*"spark.components.VScrollBar"*)] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> */* Define the skin elements that should not be colorized. For scroll bar, the skin itself is colorized but the individual parts are not. */ * *static* *private* *const* exclusions:Array = [*"track"*, *"thumb"*, * "decrementButton"*, *"incrementButton"*]; /** * @private */ *override* *public* *function* *get* colorizeExclusions():Array {*return*exclusions;} /** * @private */ *override* *protected* *function* initializationComplete():*void * { useChromeColor = *true*; *super*.initializationComplete(); } </fx:Script> <s:states> <s:State name="normal" /> <s:State name="disabled" /> <s:State name="inactive" /> </s:states> <!--- The default skin class is VScrollBarTrackSkin. @copy spark.components.supportClasses.TrackBase#track @see spark.skins.spark.VScrollBarTrackSkin --> <!-- <s:Button id="track" top="16" bottom="15" height="54" width="54" --> <s:Button id="track" top="0" height="100%" width="54" focusEnabled="false" skinClass="spark.skins.spark.VScrollBarTrackSkin" /> <!--- The default skin class is VScrollBarThumbSkin. @copy spark.components.supportClasses.TrackBase#thumb @see spark.skins.spark.VScrollBarThumbSkin --> <s:Button id="thumb" width="54" focusEnabled="false" visible.inactive="false" chromeColor="haloBlue" skinClass="spark.skins.spark.VScrollBarThumbSkin" /> <!--- The default skin class is ScrollBarUpButtonSkin. @copy spark.components.supportClasses.ScrollBarBase#decrementButton @see spark.skins.spark.ScrollBarUpButtonSkin --> <!-- <s:Button id="decrementButton" top="0" enabled.inactive="false" focusEnabled="false" skinClass="spark.skins.spark.ScrollBarUpButtonSkin" /> --> <!--- The default skin class is ScrollBarDownButtonSkin. @copy spark.components.supportClasses.ScrollBarBase#incrementButton @see spark.skins.spark.ScrollBarDownButtonSkin --> <!-- <s:Button id="incrementButton" bottom="0" enabled.inactive="false" focusEnabled="false" skinClass="spark.skins.spark.ScrollBarDownButtonSkin" /> --> </s:SparkSkin> -- Eric R. DeCoff Changing the world, 1 line of code at a time
