Flex : How to truncate ComboBox label while the labelfield property is already set?

Question

I have one ComboBox which has a dataprovider set to ArrayCollection . The dataProvider contains XML data.

<s:ComboBox id="articleComboBox" width="245" dataProvider="{_pageCollection}" labelField="title"  change="comboChange(event)"/>

I want a functionality that, if the the length of itemlabel is larger than some value(eg 25) the label must be truncated with the two dots(..) appended at the end.

I have implemented this in the Change event of ComboBox as:

private function comboChange(event:*):void{
   var str:String = articleComboBox.textInput.text;
   if(str.length > 25){
      str = str.slice(0, 22) + "..";
      articleComboBox.textInput.text = str;
      }
}

But it doesnt working. The text still displays the original " title " field of the dataProvider as a whole.

May be it's due the labelfield property specified in the mxml. What i am missing here??

Any suggestion will be appreciated. Please Help...

Here is the dataProvider ( _pageCollection ):

<articles>
<article id="1146270" title="new article1" page_id="3205769"></article>
<article id="1144499" title="new article2"  page_id="3205771"></article>
<article id="1082813" title="All Dressed Up And No Place To Train…" page_id="3205773"></article>
<article id="1146024" title="The NCAA Doesn" page_id="3205776"></article>
<article id="1083014" title="The Chula Vista Olympic Training Center" page_id="3205777"></article>
</articles>

Answer 1

You would create a custom Skin for your ComboBox. In the skin implementation you will see:

<s:TextInput id="textInput" enabled.disabled="false"
                 left="0" right="18" top="0" bottom="0" 
                 skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 

This is the actual TextInput you need. You can play with it or modify spark.skins.spark.ComboBoxTextInputSkin it is using.

For example, add change handler to react when a user changes it's content so you could reformat the string.