Flex 4 and spark controls offer a very strong and easy way to implement this through “Text Layout Framework” .  Flex 3 can also use the same provided we have included the swc of TextLayoutFramework.  This is pre-included in Flash Builder 4.

The property we use is baselineShift of textFlow object of RichText controls.

A very similar example of how to use this in button is given at : http://cookbooks.adobe.com/post_Superscript___Subscript_with_Text_Layout_Framework-18175.html

But to use this for a Label where we don’t need the user interaction to achieve the same we need to set the “baselineShift”.

Below sample illustrates the usage of  the same, both in MXML and ActionScript:

<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function label1_creationCompleteHandler(event:FlexEvent):void
{
lbl.textFlow.baselineShift = "superscript";
lbl.validateNow();
}

]]>
</fx:Script>

<s:RichText textAlign=”justify” height=”50%” y=”100″ width=”50%” x=”130″>
<s:span>N</s:span><s:span baselineShift=”superscript”>2</s:span>
<s:span>+ N</s:span><s:span baselineShift=”superscript”>3</s:span>
<s:span> = N</s:span>
</s:RichText>

<s:RichText textAlign=”justify” height=”50%” y=”200″ width=”50%” x=”130″>
<s:span>N</s:span><s:span baselineShift=”subscript”>2</s:span>
<s:span>+ N</s:span><s:span baselineShift=”subscript”>3</s:span>
<s:span> = N </s:span>
</s:RichText>

<s:RichText text=”2″ id=”lbl” creationComplete=”label1_creationCompleteHandler(event)”
height=”15″ y=”50″ width=”12″ x=”130″ />

<s:RichText text=”N” id=”lbl2″ creationComplete=”lbl_creationCompleteHandler(event)”
height=”15″ y=”50″ width=”20″ x=”123″ />

The output would like as follows :

Hope this helps someone who is looking  for a simpler approach to achieve the same.

Thanks to my friend Divya , for bringing this issue up .

Unlike other list based components like TileList , DG etc, vertical scroll bar doesnt moves automatically to the last of the  row item while drag/drop onto the ADG. 

This can be an issue when you have a situation [and most of the time , it can be ] when you have only few visible rows and you want to drag and drop a row /item somewhere in that ADG , not necessarily between the current visible set , you expect that Scroll should move till the last row on its own.  In ADG it does not happens , because of one bug which have been already logged here.

https://bugs.adobe.com/jira/browse/FLEXDMV-2471   — if you want to vote/keep a watch on to it.

Workaround is :

Wish me luck !!!!!!