Chinaunix首页 | 论坛 | 博客
  • 博客访问: 3336356
  • 博文数量: 530
  • 博客积分: 13360
  • 博客等级: 上将
  • 技术积分: 5473
  • 用 户 组: 普通用户
  • 注册时间: 2006-07-13 13:32
文章分类

全部博文(530)

文章存档

2017年(1)

2015年(2)

2013年(24)

2012年(20)

2011年(97)

2010年(240)

2009年(117)

2008年(12)

2007年(8)

2006年(9)

分类:

2009-12-23 15:44:20

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

继承关系如下:
    List Inheritance Inheritance Inheritance Inheritance Inheritance

子类:
    , ,

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类型数据源,并自定义控件上的显示信息

代码:

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;
}
]]>

       width="30%"
       dataProvider="{roleList}"
       labelFunction="lst_exam_getDispName"
      />
注:
    1.如果要显示的信息直接是数据源中的一个属性的值,可使用下面代码指定
            labelField="label"
      labelField:指明显示roleList对象中的哪个属性,默认值是"label"


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

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

代码:

    //数据源参考上例
    private function myDataTipFunction(value:Object):String  { 
          return (value.label + "::" + value.data); 
    } 
]]>

       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--如果文字过长,允许换行
功能说明:
    如果显示的数据项的文字过长,控件默认为多余的文字不显示,本功能指定控件将过长的数据项换行显示

代码:

    //数据源参考上例
]]>

       dataProvider="{roleList}"
       labelField="label"
       width="220"
       height="200"
       variableRowHeight="true"
       wordWrap="true"
/>
注:
    1.利用wordWrap和variableRowHeight属性,指定过长的数据项自动换行

6.属性alternatingItemColors--指定控件的交互底色
功能说明:
    自定义控件的交互底色
代码:
   


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

代码:

    //数据源参考上例
    protected function lst_exam_itemClickHandler(event:ListEvent):void
    {
        var t:List=event.currentTarget as List;
        Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);
    }
]]>

       width="30%"
       dataProvider="{roleList}"
       labelField="label"
       itemClick="lst_exam_itemClickHandler(event)"/>





参考文献:
1.List control.
2.Add ToolTip in List/ComboBox Control. http://fhuan123.javaeye.com/blog/359029
阅读(4342) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~