列表控件的使用（一）

与列表相关的控件有：列表控件（List Control）、水平列表控件（HorizontalList Control）、片式列表控件（TileList Control）、组合框控件（ComboBox Control）等。这些控件直接或间接地继承mx.controls.listClasses.ListBase类。

 

一、ListBase类

      一）常用的属性

            1、allowMultipleSelection：是否允许多项选择。默认为false。

            2、dataProvider：数据提供者。

            3、showDataTip：是否允许显示提示信息。

            4、dataTipField：指明在数据中哪一部分，当鼠标停留在数据项上时，显示的提示信息。

            5、dataTipFunction：指定的自定义方法返回显示的提示信息。

            6、iconField：指定哪个数据字段值决定数据条目中的图标。

            7、labelField：指定哪个数据字段作为控件中数据的标签。

            8、labelFunction：自定义控件中数据标签的内容，而不用labelField中指定的值。

            9、selectedIndex：选中条目的序号，没有选中任何条目时为-1。

            10、selectedIndices：

            11、selectedItem：选中条目的具体信息。

            12、selectedItems：

            13、variableRowHeight：是否允许每行的高度不同。

            14、wordWrap：是否允许数据换行。

            15、columnCount：表格的列数。

            16、columnWidth：列宽。

            17、rowCount：行数。

            18、rowHeight：行高。

            19、itemRenderer：条目渲染器，用于定制条目中显示的内容。

 

      二）常用的事件

            1、change：当selectedIndex、selectedItem属性值变化时触发。

            2、itemClick：单击条目时触发。

            3、itemDoubleClick：双击条目时触发。

            4、itemRolOver：当鼠标停留在条目上时触发。

 

二、列表控件（List Control）的使用

      一）常用的属性

            1、editable：是否可编辑条目中的数据。默认为false。

            2、showScrollTips：是否显示滚动条提示。

            3、scrollTipFunction：定义显示滚动条提示的内容。

            4、editedItemPosition：可编辑条目的起始位置。

 

      二）常用的事件

            1、itemEditBeginning：条目进入编辑状态时触发。

            2、itemEditEnd：条目完成编辑时触发。

            3、scroll：拖动滚动条时触发。

 

      三）范例源码

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ListEvent;
            
            [Embed(source='images/gif-0252.gif')]
            public var myItemIcon:Class;
            
            //自定义控件中标签的内容
            private function labelFunc(item:Object):String{
                //return item.label + "(" + item.key + ")";
                return item.label;
            }
            
            private function dataTipFunc(item:Object):String{
                return item.label + ", " + item.key;
            }
            
            /*
             * direction：滚动条的方向，取值有：vertical、horizontal
             * position：滚动条离控件顶端的距离
             */
            private function scrollTipFunc(direction:String, position:Number):String{
                if(direction == "vertical"){
                    return "查看其它条目";
                }
                return "";
            }
            
            //单击数据条目时触发该事件
            private function itemClickEvent(event:ListEvent):void{
                //Alert.show(event.target.selectedItem.label,"提示",Alert.OK,p1);
            }
            
            private function itemEditBeginningEvent(event:ListEvent):void{
                msg.text = "开始编辑条目：" + event.target.selectedItem.label;
            }
            
            private function itemEditEndEvent(event:ListEvent):void{
                msg.text = "完成编辑条目：" + event.target.selectedItem.label;
            }
        ]]>
    </mx:Script>
    
    <!-- 以<mx:Model>标签定义数据 -->
    <mx:Model id="model1">
        <subjects>
            <subject label="语文" key="YW" itemIcon="myItemIcon"/>
            <subject label="英语" key="YY" itemIcon="myItemIcon"/>
            <subject label="数学" key="SX" itemIcon="myItemIcon"/>
            <subject label="物理" key="WL" itemIcon="myItemIcon"/>
            <subject label="化学" key="HX" itemIcon="myItemIcon"/>
            <subject label="生物" key="SW" itemIcon="myItemIcon"/>
            <subject label="政治" key="ZZ" itemIcon="myItemIcon"/>
            <subject label="历史" key="LS" itemIcon="myItemIcon"/>
            <subject label="地理" key="DL" itemIcon="myItemIcon"/>
        </subjects>
    </mx:Model>
    
    <mx:Panel id="p1" x="10" y="10" width="326" height="265" layout="absolute" title="列表控件" fontSize="12">
        <mx:List x="10" y="10" width="153" fontSize="12" height="166"
            dataProvider="{model1.subject}"
            iconField="itemIcon"
            showDataTips="true"
            dataTipFunction="dataTipFunc"
            showScrollTips="true"
            scrollTipFunction="scrollTipFunc"
            itemClick="itemClickEvent(event)"
            editable="true"
            itemEditBeginning="itemEditBeginningEvent(event)"
            itemEditEnd="itemEditEndEvent(event)"/>
            
        <mx:Label x="10" y="184" width="153" id="msg"/>
    </mx:Panel>
    
</mx:Application>

三、水平列表控件（HorizontalList Control）的使用

      当图片作为单独的条目而不是作为条目的图标出现时，需要使用自定义的条目渲染器，将其它控件或者自定义的组件嵌入到控件中。

     1）使用图片控件作为条目渲染器

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var cat: Array = ["images/info.png", "images/msg.png", "images/que.png", "images/warn.png"];
        ]]>
    </mx:Script>
    
    <mx:HorizontalList x="356" y="66" width="424" height="59" 
        columnCount="4" 
        columnWidth="80"
        dataProvider="{cat}"
        itemRenderer="mx.controls.Image"/>
    
</mx:Application>

 2）使用自定义组件作为条目渲染器

           在主文件向组件文件传值时，使用data对象。在组件文件中可以利用data加上”属性名“获得主文件的数据。

          1、自定义组件名为ShengXiao，存放在com.cjm.controls包中。其源码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="202" height="253">
    <mx:Image width="80" height="80" source="{data.src}"/>
    <mx:Text width="80" textAlign="center" text="{data.label}"/>
</mx:VBox>

2、主文件源码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            
            //单击数据条目时触发该事件
            private function itemClickEvent(event:ListEvent):void{
                msg2.text = "当前选择生肖为：" + event.target.selectedItem.label;
            }
        ]]>
    </mx:Script>
    
    <mx:Model id="sxData">
        <root>
            <sx label="鼠" src="images/sx/png-1501.png"/>
            <sx label="牛" src="images/sx/png-1502.png"/>
            <sx label="虎" src="images/sx/png-1503.png"/>
            <sx label="兔" src="images/sx/png-1504.png"/>
            <sx label="龙" src="images/sx/png-1505.png"/>
            <sx label="蛇" src="images/sx/png-1506.png"/>
            <sx label="马" src="images/sx/png-1507.png"/>
            <sx label="羊" src="images/sx/png-1508.png"/>
            <sx label="猴" src="images/sx/png-1509.png"/>
            <sx label="鸡" src="images/sx/png-1510.png"/>
            <sx label="狗" src="images/sx/png-1511.png"/>
            <sx label="猪" src="images/sx/png-1512.png"/>
        </root>
    </mx:Model>
    
    <mx:Panel x="10" y="311" width="564" height="230" layout="absolute" title="水平列表控件" fontSize="12">
        <mx:HorizontalList x="10" y="10" width="480" height="140" 
            columnCount="6"
            columnWidth="80"
            dataProvider="{sxData.sx}"
            itemClick="itemClickEvent(event)"
            itemRenderer="com.cjm.controls.ShengXiao"/>
        <mx:Text x="10" y="158" width="160" id="msg2"/>
    </mx:Panel>
    
</mx:Application>