zoukankan      html  css  js  c++  java
  • 在ComboBox下拉列表中显示具有多行的文本

    问题要求

    在ComboBox组件的下拉列表中显示多行的文本。

    解决方案

    下面的例子讲述了如何在Flex的ComboBox组件创建可变行高的item Render,这个问题可以通过设置ComboBox的dropdown.variableRowHeight得到解决。

    代码

    1 <?xml version="1.0" encoding="utf-8"?>
    2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left" fontSize="12" backgroundColor="white">
    3     <mx:Script>
    4         <![CDATA[
    5             import mx.controls.ComboBox;
    6             import mx.events.DropdownEvent;
    7 
    8             protected function combobox1_openHandler(event:DropdownEvent):void
    9             {
    10                 (event.target as ComboBox).dropdown.variableRowHeight = true;
    11             }
    12 
    13         ]]>
    14     </mx:Script>
    15 
    16     <mx:Array id="arr">
    17         <mx:Object name="Baltimore Orioles" abbr="BAL" />
    18         <mx:Object name="Boston Red Sox" abbr="BOS" />
    19         <mx:Object name="Chicago White Sox" abbr="CWS" />
    20         <mx:Object name="Cleveland Indians" abbr="CLE" />
    21         <mx:Object name="Detroit Tigers" abbr="DET" />
    22         <mx:Object name="Kansas City Royals" abbr="KC" />
    23         <mx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" />
    24         <mx:Object name="Minnesota Twins" abbr="MIN" />
    25         <mx:Object name="New York Yankees" abbr="NYY" />
    26         <mx:Object name="Oakland Athletics" abbr="OAK" />
    27         <mx:Object name="Seattle Mariners" abbr="SEA" />
    28         <mx:Object name="Tampa Bay Devil Rays" abbr="TB" />
    29         <mx:Object name="Texas Rangers" abbr="TEX" />
    30         <mx:Object name="Toronto Blue Jays" abbr="TOR" />
    31     </mx:Array>
    32    
    33     <mx:Label text="具有可变行高的ComboBox:"/>
    34     <mx:ComboBox dataProvider="{arr}" labelField="name" width="150"
    35         open="combobox1_openHandler(event)">
    36         <mx:itemRenderer>
    37             <mx:Component>
    38                 <mx:Text selectable="false" toolTip="{data.name} {data.abbr}"/>
    39             </mx:Component>
    40         </mx:itemRenderer>
    41        
    42     </mx:ComboBox>
    43    
    44 </mx:Application>
    45 

    效果:

  • 相关阅读:
    改造vue-quill-editor: 结合element-ui上传图片到服务器
    webpack2.X、Vue学习以及将两者相结合
    Vuex-一个专为 Vue.js 应用程序开发的状态管理模式
    vue深究第一弹:computed与watch的异同
    管理系统列表和详情配置
    Vue和vue-template-compiler版本之间的问题
    vuex 闲置状态重置方案
    mac install brew
    Android——推断Service是否已经启动
    【android】uses-permission和permission具体解释
  • 原文地址:https://www.cnblogs.com/iihe602/p/1550390.html
Copyright © 2011-2022 走看看