• Flex 列表控件中的操作


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

    1.使用数据提示:

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

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

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

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
     3                        xmlns:s="library://ns.adobe.com/flex/spark" 
     4                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
     5     <fx:Script>
     6         <![CDATA[
     7             
     8             
     9             //定义数据条目显示的内容,在列表控件中,该方法只有一个参数,为当前的数据条目
    10             
    11         private function myDataTipFunction(item:Object):String
    12         {
    13            return "您查看的内容为:"+item.label+item.data;
    14         }
    15             
    16         /*    
    17             定义滚动条显示的提示内容,该方法包括2个参数
    18             direction为滚动条的方向
    19             position为滚动条离控件顶端的距离
    20         */    
    21             private function scrollTipFunction(direction:String,position:Number):String
    22             {
    23               if(direction == "vertical")
    24                   return "查看剩余条目"
    25               else
    26                   return "";
    27             
    28             }
    29             
    30         ]]>
    31     </fx:Script>
    32     
    33     <fx:Declarations>
    34         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    35     
    36     
    37     <fx:Model id="myPhone">
    38         <!--定义列表控件所需的数据-->
    39         <states>
    40             <state label="诺基亚" data="nokia"/>
    41             <state label="摩托罗拉" data="moto"/>
    42             <state label="索爱" data="se"/>
    43             <state label="三星" data="sum"/>
    44             <state label="Palm" data="pal"/>
    45             <state label="黑莓" data="bb"/>
    46             <state label="联想" data="le"/>
    47             <state label="其他" data="etc"/>
    48         </states>
    49     </fx:Model>
    50 </fx:Declarations>
    51     
    52     <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
    53         <mx:Label text="选择手机品牌"/>
    54         <!--定义列表控件,数据提供器为myPhone中state的内容,控件自动读取label标签内容显示-->
    55         <mx:List id="source" color="blue" width="100%" height="100%"
    56                        dataProvider="{myPhone.state}"
    57                         rollOverColor="#80FF00" showDataTips="true"
    58                         showScrollTips="true" dataTipFunction="myDataTipFunction" scrollTipFunction="scrollTipFunction"/>
    59         
    60     </mx:Panel>
    61 </s:WindowedApplication>

    效果如图:

      

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

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

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

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

    3.编辑列表条目中数据

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

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
     3                        xmlns:s="library://ns.adobe.com/flex/spark" 
     4                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
     5     <fx:Script>
     6         <![CDATA[
     7             //定义条目中所使用的图标
     8 
     9             import mx.events.ListEvent;
    10             //鼠标单击时触发的事件条目处于可编辑状态
    11             private function itemEditBegin(event:ListEvent):void
    12             {
    13               state.text="当前状态为:可以编辑数据";
    14             }
    15             //当编辑完条目,鼠标单击其他区域时触发的事件,条目处于编辑状态完成
    16             private function itemEditEnd(event:ListEvent):void
    17             {
    18               state.text="当前状态为:完成编辑数据";
    19             }
    20             
    21             //当单击条目时,显示条目显示的标签,在编辑后单击标签,显示更新后的标签值
    22             private function showType(event:ListEvent):void
    23             {
    24               typee.text = event.target.selectedItem.label;
    25             }
    26             
    27             
    28             
    29         ]]>
    30     </fx:Script>
    31     
    32     <fx:Declarations>
    33         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    34     
    35     
    36     <fx:Model id="myPhone">
    37         <!--定义列表控件所需的数据-->
    38         <states>
    39             <state label="诺基亚" data="nokia" />
    40             <state label="摩托罗拉" data="moto" />
    41             <state label="索爱" data="se" />
    42             <state label="三星" data="sum" />
    43             <state label="Palm" data="pal" />
    44             <state label="黑莓" data="bb" />
    45             <state label="联想" data="le" />
    46             <state label="其他" data="etc" />
    47         </states>
    48     </fx:Model>
    49 </fx:Declarations>
    50     
    51     <mx:Panel title="xianshitubiao" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340" height="316">
    52         <mx:Label text="选择手机品牌"/>
    53         <!--定义列表控件,数据提供器为myPhone中state的内容,控件自动读取label标签内容显示-->
    54         <mx:List id="source" color="blue" width="100%" height="100%"
    55                        dataProvider="{myPhone.state}"
    56                         rollOverColor="#80FF00" editable="true" itemEditBeginning="itemEditBegin(event)"
    57                         itemEditEnd="itemEditEnd(event)" itemClick="showType(event)"
    58                         />
    59         <mx:Label id="state"/>
    60         <mx:Label id="typee"/>
    61         
    62     </mx:Panel>
    63 </s:WindowedApplication>

    效果如图:

  • 相关阅读:
    jqueryautocomplete
    了解CSS的查找匹配原理 让CSS更简洁、高效
    html5网页编码
    刚开始学习 mvc碰到的郁闷问题
    datatable 批量插入方法 求解?
    28个经过重新设计的著名博客案例(1120)
    递归调用中的return
    C++新建一个模板
    C++ 中用 sizeof 判断数组长度
    为什么MySQL选择REPEATABLE READ作为默认隔离级别?
  • 原文地址:https://www.cnblogs.com/grq186/p/4123808.html
Copyright © 2020-2023  润新知