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横向条形图增加滚动条,拖动滚动条显示数据
Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格
flex实现 ComboBox中下拉checkbox 经测试好用,还有可移动面板,和可改大小面板实例
自己编写的一个flex下拉框组件,功能比较强大,可以做到二级级联,三级级联,四级级联等。并且在初始化页面的时候,可以自动显示已选择的
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
Flex相册 Flex图片
行中实现勾选与下拉列表功能
Flex实现带复选框的列表树,实现全选和反选
flex批量上传图片带预览功能flex批量上传图片带预览功能flex批量上传图片带预览功能
ArcGIS For Flex 地图联动
Flex ComBox 下拉树功能例子 以及相关代码
flex datagrid 中实现combobox联动,这是我写的一个简单的例子供大家一起学习进步。希望对你们有所帮助。
从其他网站找的一个Flex 下拉多选 支持ComboBox DropDownList 带有复选框
flexBulider页面加载动态图片的显示
flex 图片浏览\放大\缩小,
用flex实现图片上传带预览功能。各位可以试试。
flex 线图到饼图的联动,实现了由线图的数据联动饼图的数据。 联动效果
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
Flex 简单的图片浏览 有缩放和平移功能