ComboBox控件

 

ComboBox控件使用

指南  

 

1.ComboBox控件概述

控件的理解

     ComboBox组件可以从一个下拉表中选择某一项，而当所选项改变时它会发布change事件。通常使用Array和Arraycollection来作为ComboBox的数据源，如果Array中的数据都是String类型那么这些字符串会直接显示在下拉列表的各项中。

功能相似的控件

   List控件，主要区别：list是把数据元素直接显示出来，而comboBox则是弹出式的下拉菜单。

1.3继承关系

Combobox—>combobase—>UIcomponent—>FlexSprite—>Sprite —>DisplayObjectContainer—>InteractiveObject—>DisplayObject—>EventDispatcher—>object

UIComponent—>ComboBase

UIComponent—>ComboBase—>colorPicker

UIComponent—>ComboBase—>comboBox

UIComponent—>ComboBase—>DateField

 

参考文献：Adobe® Flex® 4.1 语言参考

控件常用属性和方法

名称	分类	说明
dataprovider	属性	数据源
labelField	属性	数据源中作标签显示的名称
Data（待研究）（flex3）	属性	当您在项呈示器或项目编辑器重是偶那个某个组件时刻借助data属性向该组件传递值
Dropdownwidth（flex3）	属性	下拉列表的宽度（以像素为单位）
Rowcount（flex3）	属性	列表中可见行数的最大数目如果dataprovider中的项目少于此数目则combobox仅显示dataprovider中的包含的项目
Prompt（flex3）	属性	Combobox控件的提示（详见3.5）
Autolayout（flex4）	属性	如果为true则在更改子项的位置或大小时完成度量好布局（详见3.6）
TypicalItem（flex4）待解	属性	当需要固定的行或大小时布局使用TypicalItem的首选大小，但不设置某个特定的rowHeight或columnwidth值

 

的使用方法

使用

功能： 当用户点击下拉列表时会出现dataprovider所提供的列表值。

主要代码:

x="194" y="173"dataProvider="{arr1}" labelField="ingredient" id="test"/>

演示效果：bin-debug\lizi.html

详细代码见“lizi.mxml”

 

与label的用法区别

     如果数据时对象类型，那么在默认情况下ComboBox组件会将对象中label属性的值显示在下拉列表中如果没有label的属性，你们用户可以通过设置Combobox组件的labelField属性来决定下拉列表的显示字段。

  法1:label

              [Bindable]

public var arr1:ArrayCollection=new ArrayCollection([{label:"男",data:"a"},

{label:"女", data:"b"}]);]]>

   

    x="194" y="173"  dataProvider="{arr1}"  id="test"/>

法2：labelfield

              [Bindable]

public var arr1:ArrayCollection=new ArrayCollection([{ingredient:"男",data:"a"},    {ingredient:"女", data:"b"}]);]]>

   

    x="194" y="173"  dataProvider="{arr1}" labelField="ingredient" id="test"/>

 

演示效果如下：

代码详见：combobox.mxml

3.3Rowcount属性的理解（只在flex3中）

   Combobox控件列表中可见行数的最大数目。如果dataprovider中的项目少于此数目，则combobox仅显示dataprovider中包含的项目，默认值为5。而在flex4中没有（暂时没找到），但是flex4中它默认可见行数为6

代码如下：

  flex4中：   [Bindable]

           public var arr1:ArrayCollection=new ArrayCollection([{label:"黄瓜", data:"1"}, 

           {label:"苹果", data:"2"},

           {label:"橘子", data:"3"},

           {label:"橙子", data:"4"},

           {label:"梨"  , data:"5"},

           {label:"西瓜" ,data:"6"},

           {label:"葡萄", data:"7"}]);

       ]]>

演示效果：

代码详见“lizi.mxml”

Flex3中： id="arr">

       label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />

       label="Donec sit amet dui nec pede aliquam auctor." />

       label="Integer vestibulum sodales dui." />

       label="Sed nonummy ligula et tortor." />

       label="Aenean varius neque vel felis." />

       label="Phasellus venenatis ipsum sit amet nisi." />

       label="Nullam vitae turpis et ipsum cursus venenatis." />

       label="Pellentesque tincidunt pede non arcu." />

   

 

    id="cb" rowCount="3"

               dataProvider="{arr}"

               itemRenderer="mx.controls.Label"

               width="200" />

通过rowcount属性我们设置它可见行的行数为3

效果演示如下：

代码详见：rowcount.mxml

3.4dropdownwidth属性的举例（只在flex3中）

功能：设定下拉列表的宽度（以像素为单位）

关键代码如下：

    id="arr">

       label="我是个学生." />

       label="中华人民共和国." />

       label="陕西省西安市" />

      

   

   

    id="cb"  dropdownWidth="100"

               dataProvider="{arr}"

               itemRenderer="mx.controls.Label"

               width="112"  x="257"/>

演示效果如下：

当dropdownwidth=100

当dropdownwidth=50

代码详见“dropdownwidth.mxml”

3.5prompt属性的举例（仅在mx中有）

功能：

在combobox控件的textInput部分中显示的String，他通常是一个String值。如果没有提示则combobox控件会将selectedIndex设置为0并显示dataprovider中的第一个项目

 关键代码：

      id="arr">

       Object label="我是个学生." />

       Object label="中华人民共和国." />

       Object label="陕西省西安市" />

      

     

   

      id="cb"  dropdownWidth="50"

               dataProvider="{arr}"  prompt="请选择"

               itemRenderer="mx.controls.Label"

               width="112"  x="257"/>

演示效果：

代码详见“prompt.mxml”

3.6autolayout属性的例子

功能：

如果为true则在更改子项的位置或大小时完成度量和布局。如果为false，则仅当在容器中添加或伤处子项时才能执行度量和布局。默认为true

代码如下：

           import mx.collections.ArrayCollection;

          

           [Bindable]

           public var arr1:ArrayCollection=new ArrayCollection([{label:"黄瓜", data:"1"}, 

              {label:"苹果", data:"2"},

              {label:"橘子", data:"3"},

              {label:"橙子", data:"4"},

              {label:"梨"  , data:"5"},

              {label:"西瓜" ,data:"6"},

              {label:"葡萄", data:"7"}]);

       ]]>

   

       autoLayout="false" dataProvider="{arr1}" x="285" y="152" width="86"/>

演示效果如下：

Autolayout=”false”

Autolayout=”true”

详细代码见“autolayout.mxml”

 

声明：如果有人需要详细代码请留言联系本人！！