flex控件list

1.List控件简介
    该控件主要用于“竖向显示单列表数据项”。如果数据项过多,可以出现一个垂直滚动条。

继承关系如下:
    List Inheritance ListBase Inheritance ScrollControlBase Inheritance UIComponent Inheritance FlexSprite Inheritance Sprite 

子类:
    FileSystemListMenuTree

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)"/>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值