主要操作包括:显示提示,使用图标,编辑列表条目中数据。

1.使用数据提示:

当鼠标停留在条目上时,可以显示该条目的相关数据提示。

当利用滚动条时,可以显示滚动条的相关提示。

在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示。

 <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
<fx:Script>
<![CDATA[ //定义数据条目显示的内容,在列表控件中,该方法只有一个参数,为当前的数据条目 private function myDataTipFunction(item:Object):String
{
return "您查看的内容为:"+item.label+item.data;
} /*
定义滚动条显示的提示内容,该方法包括2个参数
direction为滚动条的方向
position为滚动条离控件顶端的距离
*/
private function scrollTipFunction(direction:String,position:Number):String
{
if(direction == "vertical")
return "查看剩余条目"
else
return ""; } ]]>
</fx:Script> <fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 --> <fx:Model id="myPhone">
<!--定义列表控件所需的数据-->
<states>
<state label="诺基亚" data="nokia"/>
<state label="摩托罗拉" data="moto"/>
<state label="索爱" data="se"/>
<state label="三星" data="sum"/>
<state label="Palm" data="pal"/>
<state label="黑莓" data="bb"/>
<state label="联想" data="le"/>
<state label="其他" data="etc"/>
</states>
</fx:Model>
</fx:Declarations> <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
<mx:Label text="选择手机品牌"/>
<!--定义列表控件,数据提供器为myPhone中state的内容,控件自动读取label标签内容显示-->
<mx:List id="source" color="blue" width="100%" height="100%"
dataProvider="{myPhone.state}"
rollOverColor="#80FF00" showDataTips="true"
showScrollTips="true" dataTipFunction="myDataTipFunction" scrollTipFunction="scrollTipFunction"/> </mx:Panel>
</s:WindowedApplication>

效果如图:

  

2.在列表控件中使用图标

在列表控件中可以使用iconField和iconFunction属性定义图标相关的属性以及方法。

 <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
<fx:Script>
<![CDATA[
//定义条目中所使用的图标
[Embed(source="assets/mm-icon.png") ]
public var iconSymbol:Class; ]]>
</fx:Script> <fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 --> <fx:Model id="myPhone">
<!--定义列表控件所需的数据-->
<states>
<state label="诺基亚" data="nokia" myIcon="iconSymbol"/>
<state label="摩托罗拉" data="moto" myIcon="iconSymbol"/>
<state label="索爱" data="se" myIcon="iconSymbol"/>
<state label="三星" data="sum" myIcon="iconSymbol"/>
<state label="Palm" data="pal" myIcon="iconSymbol"/>
<state label="黑莓" data="bb" myIcon="iconSymbol"/>
<state label="联想" data="le" myIcon="iconSymbol"/>
<state label="其他" data="etc" myIcon="iconSymbol"/>
</states>
</fx:Model>
</fx:Declarations> <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
<mx:Label text="选择手机品牌"/>
<!--定义列表控件,数据提供器为myPhone中state的内容,控件自动读取label标签内容显示-->
<mx:List id="source" color="blue" width="100%" height="100%"
dataProvider="{myPhone.state}"
rollOverColor="#80FF00" iconField="myIcon"/> </mx:Panel>
</s:WindowedApplication>

iconField="myIcon":指明条目的图标由数据中的myIcon属性提供。

3.编辑列表条目中数据

编辑列表中的数据时,需要将editable属性设置为true。

 <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
<fx:Script>
<![CDATA[
//定义条目中所使用的图标 import mx.events.ListEvent;
//鼠标单击时触发的事件条目处于可编辑状态
private function itemEditBegin(event:ListEvent):void
{
state.text="当前状态为:可以编辑数据";
}
//当编辑完条目,鼠标单击其他区域时触发的事件,条目处于编辑状态完成
private function itemEditEnd(event:ListEvent):void
{
state.text="当前状态为:完成编辑数据";
} //当单击条目时,显示条目显示的标签,在编辑后单击标签,显示更新后的标签值
private function showType(event:ListEvent):void
{
typee.text = event.target.selectedItem.label;
} ]]>
</fx:Script> <fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 --> <fx:Model id="myPhone">
<!--定义列表控件所需的数据-->
<states>
<state label="诺基亚" data="nokia" />
<state label="摩托罗拉" data="moto" />
<state label="索爱" data="se" />
<state label="三星" data="sum" />
<state label="Palm" data="pal" />
<state label="黑莓" data="bb" />
<state label="联想" data="le" />
<state label="其他" data="etc" />
</states>
</fx:Model>
</fx:Declarations> <mx:Panel title="xianshitubiao" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340" height="316">
<mx:Label text="选择手机品牌"/>
<!--定义列表控件,数据提供器为myPhone中state的内容,控件自动读取label标签内容显示-->
<mx:List id="source" color="blue" width="100%" height="100%"
dataProvider="{myPhone.state}"
rollOverColor="#80FF00" editable="true" itemEditBeginning="itemEditBegin(event)"
itemEditEnd="itemEditEnd(event)" itemClick="showType(event)"
/>
<mx:Label id="state"/>
<mx:Label id="typee"/> </mx:Panel>
</s:WindowedApplication>

效果如图:

Flex 列表控件中的操作的更多相关文章

  1. WPF 列表控件中的子控件上下文绑定

    <DataGrid Grid.ColumnSpan=" Height="Auto" SelectedItem="{Binding Path=SelectP ...

  2. 【WPF开发备忘】使用MVVM模式开发中列表控件内的按钮事件无法触发解决方法

    实际使用MVVM进行WPF开发的时候,可能会用到列表控件中每行一个编辑或删除按钮,这时直接去绑定,发现无法响应: <DataGridTemplateColumn Header="操作& ...

  3. 列表控件ListBox关联的MFC中的类:CListBox

    列表控件ListBox关联的MFC中的类:CListBox ######################################################## 1.在列表的结尾添加一项: ...

  4. VC++ 列表控件的使用方法

    列表控件可以看作是功能增强的ListBox,它提供了四种风格,而且可以同时显示一列的多中属性值.MFC中使用CListCtrl类来封装列表控件的各种操作. 通过调用BOOL Create( DWORD ...

  5. 列表控件QListWidget

    列表控件可以让我们以列表形式呈现内容,是界面更加有序美观.QListWidget列表控件应当与QListWidgetItem一起使用,后者作为项被添加入列表控件中,也就是说列表控件中的每一项都是一个Q ...

  6. 将数据表中的数据添加到ComboBox控件中

    实现效果: 知识运用: ComboBox控件的DataSource 属性 //获取或设置ComboBox的数据源 public Object DataResouce{get;set;} //属性值:任 ...

  7. 高级列表控件ListCtrl关联的MFC中的类:CListCtrl

    高级列表控件ListCtrl关联的MFC中的类:CListCtrl■ 报表样式ListCtrl常用操作:1.添加列标题头:InsertColumn2.获取与设置列宽:GetColumnWidth.Se ...

  8. Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)

    原文:Jetpack Compose学习(9)--Compose中的列表控件(LazyRow和LazyColumn) - Stars-One的杂货小窝 经过前面的学习,大致上已掌握了compose的基 ...

  9. 从PeopleEditor控件中取出多用户并更新到列表

    如果一个列表中有一个字段类型为用户或用户组,并且设置为用户,允许多值的话,那么用代码进行更新的时候就必须将这个字段的值赋成SPFieldUserValueCollection类型,以下代码即为从Peo ...

随机推荐

  1. 8张图带你深入理解Java

    1.字符串的不变性 下图展示了如下的代码运行过程: String s = "abcd";s = s.concat("ef");   备注:String refe ...

  2. Nginx/LVS/HAProxy负载均衡软件的优缺点详解(转)

    PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均衡的使用是随着网站规模的提升根据不 ...

  3. C#Winfrom系统打印机调用/设置默认打印机

    实现如下效果: 实现方式如下: using System;using System.Drawing.Printing;using System.Runtime.InteropServices;usin ...

  4. Linux下文件的压缩和解压

    tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...

  5. Mongodb集群搭建及spring和java连接配置记录

    一.基本环境: mongdb3.0.5数据库 spring-data-mongodb-1.7.2.jar mongo-java-driver-3.0.2.jar linux-redhat6.3 tom ...

  6. titan

    简介 (1)titan:存储,查询图形结构的数据库.分布式集群环境下,可支持数以千亿级别的点和边,同时支持上千个并发的实时的复杂图形遍历,支持ACID事务. (2)架构:支持以下3方面的自由组合 节点 ...

  7. php 消息队列

    本消息队列用于linux下,进程通信 #根据路径和后缀创建一个id $key = ftok(__DIR__, 'R'); #获取队列中的消息 $q = msg_get_queue($key); #删除 ...

  8. OSTimeDelay(1)

    当OS_TICKS_PER_SEC=100HZ ,即每个时钟节拍10ms;如果想延时10ms而调用OSTimeDelay(1)是不行的,调用该函数至少要2个时钟节拍才不会因时间太短,调度跟不上而产生错 ...

  9. M2M

    1, M2M (数据算法模型) M2M是将数据从一台终端传送到另一台终端,也就是机器与机器(Machine to Machine)的对话.   M2M简介 但从广义上M2M可代表机器对机器(Machi ...

  10. android之location02

    package com.example.mars_3300_location02; import java.net.ContentHandler; import java.util.List; imp ...