The following example shows how you can set a custom stretch cursor for a Flex DataGrid with resizable columns by setting the stretchCursor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed("assets/arrow_refresh_small.png")]
private var stretchIcon:Class;
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
stretchCursor="{stretchIcon}">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="score" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
Alternately, you could embed the cursor directly in the MXML code using the stretchCursor style and @Embed(), as seen in the following snippet:
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
stretchCursor="@Embed(’assets/arrow_refresh_small.png’)">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="score" />
</mx:columns>
</mx:DataGrid>
You can also set the stretchCursor style using an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
DataGrid {
stretchCursor: Embed("assets/arrow_refresh_small.png");
}
</mx:Style>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="score" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Or, you could set the stretchCursor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Embed("assets/arrow_refresh_small.png")]
private var stretchIcon:Class;
private function init():void {
dataGrid.setStyle("stretchCursor", stretchIcon);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
initialize="init();">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="score" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Icons are from the famfamfam.com “Silk” collection: http://www.famfamfam.com/lab/icons/silk/.





How would you make it line up so the center, rather than the left edge, of the icon is positioned over the divider line?