我想在Spark Combo-box中显示每个项目的工具提示。
我在combox中使用自己的类是完整代码
package com.zigron.controls.extended.components
{ import com.zigron.controls.extended.skins.LabelTextInputSkin; import com.zigron.controls.extended.skins.comboBoxRegisterationSkin;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;
import mx.collections.IList;
import spark.components.ComboBox;
import spark.components.RichEditableText;
import spark.events.DropDownEvent;
import spark.events.TextOperationEvent;
public class LabelComboBox extends ComboBox
{
/**
* By default, the match is from the beginning of the string only.
* Set searchFromBeginning to false to search the entire string for a match.
*/
public var searchFromBeginning:Boolean = false;
private var searchRegEx:RegExp;
private var _prompt:String
private var promptChanged:Boolean;
private var _autoWidth:Boolean = true;
public function LabelComboBox()
{
super();
this.setStyle("skinClass", comboBoxRegisterationSkin);
addEventListener( DropDownEvent.OPEN, function (event:DropDownEvent ):void
{
if(dropDown)
{
if( textInput.text.length == 0 )
{
ArrayCollection( dataProvider ).filterFunction = null;
ArrayCollection( dataProvider ).refresh();
}
if(autoWidth)
{
dropDown.width = scroller.horizontalScrollBar.explicitMaxWidth;
}
else
{
}
if(dropDown.width < 100)
{
//dropDown.width = dropdownOriginalWidth;
}
}
});
// Listen for key-up events to engage the filter
//this.addEventListener( KeyboardEvent.KEY_UP, onKeyUp );
this.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler);
// Drop open the ComboBox
this.openOnInput = true;
}
public function get autoWidth():Boolean
{
return _autoWidth;
}
public function set autoWidth(value:Boolean):void
{
_autoWidth = value;
}
override protected function keyDownHandler(event:KeyboardEvent):void
{
super.keyDownHandler(event);
if( ( event.keyCode == Keyboard.BACKSPACE ) ||
( event.keyCode == Keyboard.DELETE ) )
{
if( textInput.selectionAnchorPosition <= 0 )
{
textInput.text = "";
ArrayCollection( this.dataProvider ).filterFunction = null;
ArrayCollection( this.dataProvider ).refresh( );
selectedIndex = -1;
}
}
//adjustSelectionAndCaretUponNavigation(event);
}
override public function set dataProvider(value:IList):void
{
super.dataProvider = value;
if( value is ICollectionView)
{
( value as ICollectionView ).filterFunction = firstOnlyFilter;
}
}
protected function firstOnlyFilter ( item:Object):Boolean
{
var label2 : String;
try
{
if( labelField != "label" && ! ( item is String ) )
label2 = item[ labelField ];
else
label2 = item.toString();
}
catch(e:Error)
{
label2 = "Property not found " + labelField;
}
var len:int = textInput.selectionAnchorPosition > 0 ? textInput.selectionAnchorPosition:textInput.text.length;
var fil:String = textInput.text.substr(0, len );
trace("fil, len, pos : ", fil, len, textInput.selectionAnchorPosition );
if( label2.toLowerCase().search( fil.toLowerCase() ) != -1 )
{
return true;
}
return false;
}
override protected function textInput_changeHandler(event:TextOperationEvent):void
{
super.textInput_changeHandler( event );
if( dataProvider is ArrayCollection)
{
if( textInput.text.length == 0 )
ArrayCollection( this.dataProvider ).filterFunction = null;
( dataProvider as ArrayCollection ).refresh();
}
}
public function get prompt():String
{
return _prompt;
}
public function set prompt(v:String):void
{
if (_prompt != v)
{
_prompt = v;
}
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if( ( instance is LabelTextInput ) && partName == "textInput" )
{
trace(partName);
//var instance = new LabelTextInput();
//( instance as LabelTextInput ).prompt = prompt;
//( instance as LabelTextInput ).setStyle("skinClass", LabelTextInputSkin );
LabelTextInput(instance).prompt = prompt;
}
}
/** Each time the user presses a key, filter the ComboBox items to match. */
private function onKeyUp( event:KeyboardEvent ):void
{
var textBox:RichEditableText = RichEditableText ( event.target );
var searchText:String = event.target.text;
// Number or letter entered
if ( isAlphaChar( event.keyCode ) )
{
// Set up the search expression
searchRegEx = new RegExp( textBox.text, 'i' );
// Filter the ArrayCollection
ArrayCollection( this.dataProvider ).filterFunction = filter;
ArrayCollection( this.dataProvider ).refresh( );
// Set the ComboBox's search text
//textBox.text = searchText;
//Select the current search text
textBox.selectRange( searchText.length, searchText.length );
}
if( searchText.length == 0 )
{
selectedIndex = -1;
}
if ( event.keyCode == Keyboard.ESCAPE )
{
textBox.text = "";
ArrayCollection( this.dataProvider ).filterFunction = null;
ArrayCollection( this.dataProvider ).refresh( );
this.setFocus( );
}
}
/** The ArrayCollection filter function. Each item gets passed into this. */
private function filter( item:Object ):Boolean
{
var found:Boolean = false;
// Determine if the search string is contained in the label of each ComboBox item
if ( searchFromBeginning ) {
if ( item is String ) {
found = ( item.search( searchRegEx ) == 0 );
} else {
found = ( String( item[ this[ "labelField" ] ] ).search( searchRegEx ) == 0 );
}
} else {
if ( item is String ) {
found = ( item.search( searchRegEx ) >= 0 );
} else {
found = ( String( item[ this[ "labelField" ] ] ).search( searchRegEx ) >= 0 );
}
}
return found;
}
/** Filter out any non-alphanumeric key strokes */
private function isAlphaChar( keyCode:int ):Boolean
{
var isAlpha:Boolean = false;
if (
( keyCode > 64 && keyCode < 91 )
||
( keyCode > 96 && keyCode < 123 )
//||
//( keyCode == Keyboard.BACKSPACE )
//||
//( keyCode == Keyboard.DELETE)
) {
isAlpha = true;
}
return isAlpha;
}
}
}
如何设置工具提示的属性以及无论何时使用此组合框，都会显示工具提示的功能。
答案 0 :(得分：2)
你基本上需要的是将itemRenderer等于Label
<s:ComboBox id="cb"
dataProvider="{arr}"
itemRenderer="mx.controls.Label"
width="200" />
您还可以创建自己的自定义渲染器，其中包含标签并在渲染器中声明工具提示
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data.label}" width="100%" maxWidth="100" height="25" paddingLeft="5" paddingTop="5" toolTip ="{data.label}"/>
</s:ItemRenderer>