Apply a different style to each button on a ToggleButtonBar

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Style>
		.styleA {color: #333399;}
		.styleB {text-decoration : underline;}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			private function creationCompleteHandler():void
			{
				Object(test.getChildAt(0)).setStyle("styleName", "styleA");
				Object(test.getChildAt(2)).setStyle("styleName", "styleB");
			}
		]]>
	</mx:Script>
	<mx:ToggleButtonBar id="test" creationComplete="creationCompleteHandler();">
		<mx:dataProvider>
			<mx:Array>
				<mx:String>AAA</mx:String>
				<mx:String>BBB</mx:String>
				<mx:String>CCC</mx:String>
			</mx:Array>
		</mx:dataProvider>
	</mx:ToggleButtonBar>
</mx:Application>

Change background color of specific rows for a Spark DataGrid

Change background color of specific rows where value in a cell matches the string “sample”.

<fx:Script>
	<![CDATA[
		import mx.core.ClassFactory;			
		import spark.skins.spark.DefaultGridItemRenderer;			

		private function test_itemRendererFunction(item:Object, column:GridColumn):ClassFactory {
			if (item == null) {
				return new ClassFactory(DefaultGridItemRenderer);
			} else {
				// if(item.d1=="sample") 
				if(item[column.dataField]=="sample") {
					return new ClassFactory(GrayGridItemRenderer);						
				} else {
					return new ClassFactory(DefaultGridItemRenderer);
				}
			}
		}			
	]]>
</fx:Script>

<s:DataGrid>
	<s:columns>
		<s:ArrayList>
			<s:GridColumn dataField="d1" headerText="h1" itemRendererFunction="test_itemRendererFunction"></s:GridColumn>
			<s:GridColumn dataField="d2" headerText="h2" itemRendererFunction="test_itemRendererFunction"></s:GridColumn>
			<s:GridColumn dataField="d3" headerText="h3" itemRendererFunction="test_itemRendererFunction"></s:GridColumn>
		</s:ArrayList>
	</s:columns>
</s:DataGrid>

GrayGridItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">	
	<fx:Script>
		<![CDATA[
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
				super.updateDisplayList(unscaledWidth, unscaledHeight);
				if (data && data[column.dataField]!=''){
					lblData.text = data[column.dataField];		
				}
			}
		]]>
	</fx:Script>
	<s:Rect top="0" bottom="0" right="0" left="0">
		<s:fill>
			<s:SolidColor color="#E0E0E0" alpha="0.5"/>
		</s:fill>
	</s:Rect>
	<s:Label id="lblData" top="7" left="7" bottom="5" color="0x000000" alpha="0.5"/>	
</s:GridItemRenderer>

Sort as a numeric type String for a Spark DataGrid in Flex 4

correct: 1,2,3,4,11,12,21
incorrect: 1,11,12,2,21,3,4

private function sortCompareFunction(obj1:Object, obj2:Object, column:GridColumn): int {
	var p1:Number = obj1[column.dataField];
	var p2:Number = obj2[column.dataField];

	if (p1 < p2){
		return -1;
	} else if (p1 > p2){
		return 1;
	} else {
		return 0;
	}
}
<s:DataGrid>
	<s:columns>
		<s:ArrayList>
			<s:GridColumn dataField="d1" headerText="h1" sortCompareFunction="sortCompareFunction"/>
			<s:GridColumn dataField="d2" headerText="h2" sortCompareFunction="sortCompareFunction"/>
			<s:GridColumn dataField="d3" headerText="h3" sortCompareFunction="sortCompareFunction"/>
		</s:ArrayList>
	</s:columns>
</s:DataGrid>