flex横向带图下拉列表和联动下拉列表 效果图:
联动效果图:
代码:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import components.userComboBox; import mx.collections.ArrayCollection; import mx.containers.TitleWindow; import mx.controls.Alert; import mx.controls.treeClasses.TreeItemRenderer; import mx.core.UITextField; import mx.events.CalendarLayoutChangeEvent; import mx.events.FlexEvent; import mx.managers.PopUpManager; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import spark.events.IndexChangeEvent; [Bindable] private var users:ArrayCollection = new ArrayCollection(); private function inituser():void { users= new ArrayCollection(); users.addItem({label: "xx1", data: "xx1", imageurl:"images/user/keai1.png"}); users.addItem({label: "xx2", data: "xx2", imageurl:"images/user/keai2.png"}); users.addItem({label: "xx3", data: "xx3", imageurl:"images/user/default.jpg"}); users.addItem({label: "xx4", data: "xx4", imageurl:"images/user/keai1.png"}); users.addItem({label: "xx5", data: "xx5", imageurl:"images/user/default.jpg"}); users.addItem({label: "xx6", data: "xx6", imageurl:"images/user/keai2.png"}); users.addItem({label: "xx7", data: "xx7", imageurl:"images/user/keai1.png"}); } protected function application1_creationCompleteHandler(event:FlexEvent):void { inituser(); } [Bindable] private var myXML:XML = <root> <parent name="大类1"> <child name="大类1-小类1"/> <child name="大类1-小类2"/> <child name="大类1-小类3"/> </parent> <parent name="大类2"> <child name="大类2-小类1"/> <child name="大类2-小类2"/> <child name="大类2-小类3"/> </parent> </root> ; ]]> </fx:Script> <mx:VBox > <s:HGroup width="100%"> <s:HGroup width="100%" paddingLeft="10"> </s:HGroup> </s:HGroup> <s:VGroup width="100%" height="100%"> <mx:FormItem label="负责人:" paddingTop="0" paddingBottom="0" > <s:ComboBox id="user" width="400" itemRenderer="components.userComboBox" dataProvider="{users}" color="0x000000" selectedIndex="0"> <s:layout> <s:HorizontalLayout/> </s:layout> </s:ComboBox> </mx:FormItem> <mx:FormItem label="联动:" paddingTop="20" paddingBottom="0" > <mx:ComboBox id="cb1" dataProvider="{myXML.parent}" labelField="@name"/> <mx:ComboBox id="cb2" dataProvider="{cb1.selectedItem.child}" labelField="@name"/> </mx:FormItem> </s:VGroup> </mx:VBox > </s:Application>
userComboBox.mxml:
<?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="true" height="125"> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states> <s:Rect left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor color="0x999999" alpha="0" alpha.hovered="0.2" alpha.selected="0.6" /> </s:fill> </s:Rect> <s:VGroup height="122"> <mx:Image source="{data.imageurl}" width="90" height="90"/> <s:Label text="{data.data}" height="30"/> </s:VGroup> </s:ItemRenderer>
相关推荐
通过以上步骤,你可以在Flex环境中创建一个具备滚动条功能的横向条形图,用户可以通过拖动滚动条来查看和浏览大量的数据。在实际开发中,可能还需要根据具体需求进行样式定制、交互优化等细节工作,以提供更好的用户...
总结来说,通过自定义ComboBox的下拉列表组件和渲染器,以及创建具有移动和调整大小功能的Panel,我们可以实现Flex中的ComboBox下拉列表中带有Checkbox的功能。这使得用户能够在下拉列表中进行多选操作,同时保持了...
考虑到前端开发的多样性,这个Flex组件应确保在主流浏览器和设备上都能正常工作,包括移动设备和平板电脑。 9. **测试与调试** 为了确保组件的稳定性和可靠性,需要进行充分的单元测试、集成测试以及浏览器兼容性...
在Flex编程中,"flex 下拉 带复选框 多选" 是一个常见的组件需求,主要用于创建具有多选功能的下拉列表。在Flex中,我们可以利用两种主要的组件来实现这样的功能:ComboBox和DropDownList。这两种组件都是用户界面...
ComBox是ComboBox的缩写,它是下拉列表和文本输入框的组合,用户可以手动输入或者从下拉列表中选择。在添加下拉树功能后,列表变成了一个可展开和折叠的树形结构,用户可以通过展开节点来查看和选择更具体的数据项。...
1. **导入所需库**:首先,需要导入相关的库,例如`mx.controls.DropDownList`和`mx.controls.Tree`,这些是Flex提供的内置组件,用于创建下拉列表和树形结构。 2. **定义数据模型**:为了展示层级数据,我们需要...
`itemRenderer`是一个可以自定义显示逻辑和交互的组件,它允许我们在单元格中添加额外的功能,如我们这里要实现的下拉列表和复选框。 对于列中下拉列表的实现,我们需要创建一个自定义的`ItemRenderer`类,该类继承...
标签"菜单栏"、"tab"和"下拉"都与网页交互元素有关,菜单栏通常是网页的导航部分,而下拉列表则是一种节省空间的交互方式,常用于选项展示。"tab"在这里可能指的是菜单项之间的切换效果,也可以用在下拉菜单中作为子...
Flex相册 Flex图片
在实际应用中,这些数据通常存储在服务器端,当用户在选择过程中触发请求时,通过API接口获取并更新下拉列表。数据库版未被使用到项目中可能是因为开发者采用了其他方式获取或处理数据,或者可能是因为项目需求发生...
在Flex编程中,数据网格(DataGrid)是用于展示大量结构化数据的组件,而ComboBox是一种下拉选择框,常用于提供用户可选择的选项。当我们需要在DataGrid的不同列中实现ComboBox的联动效果时,即在一个ComboBox的选择...
在本文中,作者介绍了如何在Flex环境下使用复选框和下拉列表来实现几种常用的操作。通过实际的编码示例,我们可以学习到如何处理复选框的全选、全不选、反选以及选中特定项的操作,以及如何初始化下拉列表并将数据...
总的来说,ArcGIS For Flex 提供了强大的地图联动功能,通过灵活的事件机制和地图操作接口,开发者可以轻松构建出具有复杂联动效果的 Web GIS 应用。无论是在数据展示、分析还是交互体验上,地图联动都能为用户提供...
ComboBox是一个允许用户从下拉列表中选择一个项目的控件,它可以有一个可编辑的文本输入字段。我们可以通过设置它的dataProvider来填充下拉选项,这些选项通常是从数据服务获取的数组集合。在用户点击下拉按钮时,...
在Flex开发中,创建一个带有复选框的列表树是一种常见的需求,这通常用于实现用户对多级数据的筛选和选择。"Flex实现带复选框的列表树"这一主题涵盖了Flex编程、UI组件设计以及事件处理等多个方面的知识点。下面我们...
在这个“flex 两个图片播放小程序”项目中,我们可以看到它被用来创建一个图片浏览应用,支持图片的放大和缩小功能,提供了用户友好的交互体验。接下来,我们将深入探讨Flex在图片浏览中的应用及其关键技术。 首先...
"Flex批量上传图片带预览功能"这个话题聚焦于如何利用Adobe Flex技术实现一个功能强大的图片上传组件,该组件允许用户批量选择并预览图片,极大地提高了上传效率和用户的操作体验。 Flex是一种基于ActionScript 3.0...
本文将深入探讨如何使用CSS来创建一个横向多级的下拉菜单,以及如何实现中间带有透明间隔的效果。 首先,我们要明白CSS(层叠样式表)是用于控制网页外观和布局的语言,它可以用来定义字体、颜色、布局等样式。在这...
在本节内容中,我们将详细探讨Adobe Flex框架中DropDownList组件的应用,从基础创建到设置带图片的下拉选项。Flex是一个开源的框架,广泛用于开发富互联网应用(Rich Internet Applications, RIA)。Flex 4.5是在Adobe...
标题"flex图片上传带预览功能"表明我们将讨论如何在Flex应用中整合图片上传和预览这两个关键组件。通常,这个过程涉及到以下步骤: 1. **图片选择**:用户通过文件选择对话框选择图片。在Flex中,我们可以使用`...