Chinaunix

标题: flex4_DropDownList控件 [打印本页]

作者: sinkingboat 时间: 2011-12-21 08:44
标题: flex4_DropDownList控件
1.DropDownList控件简介
该控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。

继承关系如下：
DropDownList

DropDownListBase

List

ListBase

SkinnableDataContainer

SkinnableContainerBase

SkinnableComponent

UIComponent

子类：
    FileSystemList, Menu, Tree

2.List属性与事件
    名称             描述
editable            数据是否可编辑，值为"false|true"
editedItemPosition item renderer的位置，默认值为"No default"
editorDataField     "text"
editorHeightOffset="0"
editorUsesEnterKey="false|true"
editorWidthOffset="0"
editorXOffset="0"
editorYOffset="0"
imeMode="null"
itemEditor="TextInput"
itemEditorInstance="Current item editor"
rendererIsEditor="false|true"

3.属性DataProvider，LabelFunction--ArrayCollection数据源绑定并自定显示信息
功能说明：
    绑定ArrayCollection类型数据源，并自定义控件上的显示信息

代码：
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var roleList:ArrayCollection
       = new ArrayCollection([
         {label:"good",data:"isgood"},
         {label:"bad",data:"isbad"}
       ]);
private function lst_exam_getDispName(item:Object):String {
       var result:String = "";
       if(item.hasOwnProperty("label")){
             result+= item.label+ ",";
       }
       if(item.hasOwnProperty("data")){
             result+= item.data;
       }
       return result;
}
]]>
</fx:Script>
<mx:List id="lst_exam"
       width="30%"
       dataProvider="{roleList}"
       labelFunction="lst_exam_getDispName"
    />
注：
1.如果要显示的信息直接是数据源中的一个属性的值，可使用下面代码指定
      labelField="label"
      labelField：指明显示roleList对象中的哪个属性，默认值是"label"

4.属性dataTipFunction--显示文字提示
功能说明：
    鼠标指向每一个数据项，显示提示信息

    dataTipFunction和showDataTips为父类ListBase的属性，具体参考《FLEX控件_ListBase》

代码：
<fx:Script>
<![CDATA[
    //数据源参考上例
    private function myDataTipFunction(value:Object):String {
        return (value.label + "::" + value.data);
    }
]]>
</fx:Script>
<mx:List id="lst_exam"
       width="30%"
       dataProvider="{roleList}"
       labelField="label"
       showDataTips="true"
       dataTipFunction="myDataTipFunction"/>
注：
    1.如果每一个数据项的提示信息恰好是另一个属性的值，则直接使用下面代码指定即可
                dataTipField="data" //data表示roleList中的一个属性
    2. mx:linkBar和mx:ButtonBar由于没有继承ListBase，因此不能使用这个方法，本人也没有找到具体方法实现本功能
    3.用List控件最大的问题在于，数据之间没有直线作间隔，不如LinkBar好看，这个问题待解决

5.属性wordWrap--如果文字过长，允许换行
功能说明：
    如果显示的数据项的文字过长，控件默认为多余的文字不显示，本功能指定控件将过长的数据项换行显示

代码：
<fx:Script>
<![CDATA[
    //数据源参考上例
]]>
</fx:Script>
<mx:List id="lst_exam"
       dataProvider="{roleList}"
       labelField="label"
       width="220"
   height="200"
       variableRowHeight="true"
   wordWrap="true"/>
注：
    1.利用wordWrap和variableRowHeight属性，指定过长的数据项自动换行

6.属性alternatingItemColors--指定控件的交互底色
功能说明：
    自定义控件的交互底色
代码：
    <mx:List alternatingItemColors="[#66FFFF, #33CCCC]".../ >

7.事件itemClick--显示选中数据项的所有属性
功能说明：
    先与数据源ArrayCollection绑定，当点击控件中的一个数据项时，显示该数据项的所有属性

代码：
<fx:Script>
<![CDATA[
    //数据源参考上例
    protected function lst_exam_itemClickHandler(event:ListEvent):void
    {
        var t:List=event.currentTarget as List;
        Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);
    }
]]>
</fx:Script>
<mx:List id="lst_exam"
       width="30%"
       dataProvider="{roleList}"
       labelField="label"
       itemClick="lst_exam_itemClickHandler(event)"/>

参考文献：
1.List control. http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/mx/controls/List.html
2.Add ToolTip in List/ComboBox Control. http://fhuan123.javaeye.com/blog/359029
3.http://help.adobe.com/en_US/flex/using/WSc2368ca491e3ff92-59bf082612135c9e688-7fff.html
4.http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DropDownList.html

欢迎光临 Chinaunix (http://bbs.chinaunix.net/)