`

Flex combox测试

阅读更多
<?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="init()">

<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
private var monitorItemData:XML=<root>
<node label="负载均衡器" type="0">
<item label="apache" value="1"/>
<item label="loadbalance" value="2"/>
                   </node>
<node label="应用服务器" type="0">
<item label="apusic" value="1"/>
<item label="tomcat" value="2"/>
<item label="weblogic" value="3"/>
</node>
<node label="数据库" type="0">
<item label="mysql" value="1"/>
<item label="db2" value="2"/>
<item label="oracle" value="3"/>
</node>

</root>;

var data:ArrayCollection = new ArrayCollection();
var provider:ArrayCollection;
var xmlListCollection:XMLListCollection = new XMLListCollection();
var selectedVm:String;
var selectedSpecifyItem:String;
var obj:Object;//用于测试获取comboBox选中值

private function init():void{//将XML转换为ArrayCollection类型的数据
xmlListCollection = new XMLListCollection(monitorItemData.children());
    data.source = xmlListCollection.toArray();
//第二种方式(失效?)
// var xmlList:XMLList = new XMLList();
// xmlList = monitorItemData.elements("node");
// xmlListCollection.source = xmlList;
// var myData:ArrayCollection = new ArrayCollection(xmlListCollection.toArray());

             }

private function vmChangeHandler(e:Event):void{
var xmlListCollection:XMLListCollection = new XMLListCollection();
xmlListCollection.source = e.target.selectedItem.item;//将XMLList转换为XMLListCollection

provider = new ArrayCollection(xmlListCollection.toArray());
specifyItem.dataProvider = provider;
//specifyItem.selectedIndex=0;第二个comboBox的首项不实时更新
selectedVm = e.target.selectedItem.@label;
specifyItem.selectedIndex = -1;
         }

private function specifyItemChangeHandler(e2:Event):void{
selectedSpecifyItem = specifyItem.selectedItem.@label;
yourSelect.text=selectedVm+selectedSpecifyItem;

}
]]>
</fx:Script>
   
<s:Group width="30%" height="45%" x="153" y="33">
<s:Panel title="添加监控项" width="482" height="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Group width="100%" height="20%">
<s:Label text="虚拟设备:" id="vm" x="33" y="6"/>
<s:ComboBox x="109" y="1" width="124" id="vmCombox"  labelField="@label" dataProvider="{data}" change="vmChangeHandler(event)"/>
<s:Label x="250" y="6" text="监控指标:" id="monitorItem"/>
<s:ComboBox x="311" y="1" width="124" id="specifyItem" labelField="@label" change="specifyItemChangeHandler(event)" />

</s:Group>
<s:Line width="100%" height="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
</s:Line>
<s:Group width="100%" height="66%" id="drop">
<s:Label text="选择的监控项:" id="selectedItems" x="10" y="0"/>
<s:List height="153" width="161" x="105" y="0">
</s:List>

<s:Button label="删除" x="278" y="34"/>

<s:Button x="277" y="83" label="删除所有" id="dropAll"/>
           </s:Group>
<s:Line width="100%" height="2">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
</s:Line>
<s:Group width="100%" height="14%">
<s:Button label="确定" x="308" y="-4" id="submit"/>
<s:Button x="400" y="-4" label="取消" id="cancel"/>
<s:Label x="38" y="-1" text="你选中的为:"/>
<s:Label x="128" y="0" id="yourSelect"/>
</s:Group>
</s:Panel>
</s:Group>
</s:Application>

——————————————————————补充————————————
疑问:
1、 为什么init()方法中的第二种方式失效?
2、 vmChangeHandler方法中的specifyItem.selectedIndex=0所导致的奇怪问题
3、 扩展之comboBox中嵌套tree

——————————————实验——————————————
<?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="init()">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<fx:XML id="xmlPC_linked" source="PC_linked.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;

var xmlListCollection:XMLListCollection = new XMLListCollection();
var data:ArrayCollection;// = new ArrayCollection();
var xmlList:XMLList = new XMLList();

public function init():void{
//xmlListCollection = new XMLListCollection(xmlPC_linked.children());
//data.source = xmlListCollection.toArray();
    xmlList = xmlPC_linked.elements("node");
xmlListCollection.source = xmlList;
data = new ArrayCollection(xmlListCollection.toArray());
}

public function changeHandler(e:Event):void
{  
//showSelectedItem.text = ComboBox(e.target).selectedItem.node.label;

city.dataProvider=e.target.selectedItem.item;
city.selectedIndex=0;              
}
]]>
</fx:Script>
<s:Panel  x="262" y="144" width="296" height="200">
<s:ComboBox id="pro" dataProvider="{data}" labelField="@label" change="changeHandler(event)"/>
        <s:ComboBox id="city" labelField="@label"/>
</s:Panel>
</s:Application>
这个mxml所采用的xml是来自于外部, 在这种情况下方式一与方式二都失效。然而我将此mxml放在flex3下编译运行则正确无误...  ...

  搞什么东东呀...  ... 
分享到:
评论

相关推荐

    重绘ComBox控件实现换行 当文本达到一定长度时实现换行

    在Windows编程中,ComBox(ComboBox)控件是一种常见的用户界面元素,用于提供下拉列表让用户选择。在某些情况下,当ComBox中的选项文本较长时,可能会超出控件的宽度,导致显示不全,影响用户体验。为了解决这个...

    flex DataGrid 嵌入Combobox列拖动下拉条数据混乱

    6. **错误处理和调试**:在开发过程中,要对可能出现的问题进行充分的测试和调试,例如拖动列的边界情况、多列Combobox的同步问题等。 在提供的压缩包文件"DataGridCombobox"中,可能包含了示例代码或资源,通过...

    Flex 写的一个combox多选控件

    在Flex编程领域,Combox(组合框)是一种常用的UI组件,它结合了下拉列表和文本输入框的功能,用户可以在下拉列表中选择一个或多个选项。本篇将详细讲解如何在Flex中创建一个支持多选功能的Combox控件,并基于提供的...

    Flex 使用 Cairngorm 框架与java进行数据交互

    前台FLex工程(单独工程Cairngorm)使用Cairngorm框架与后台...②flex向后台请求,后台返回List集合,flex将集合填充到combox 附带:数据库sql在java工程中,测试通过,完整的flex使用框架Cairngorm向java后台数据交互

    DataGridCombox下拉列

    在提供的文件名"combox3"中,我们可以推测这是对`DataGridCombox` 功能的第三次迭代或改进。可能包含了一些关于如何实现或优化这个功能的代码、示例或者资源。要深入了解这些内容,你需要解压文件并查看其中的文档或...

    Asp.net中应用Jquery FlexBox实现可输入下拉框

    这是我在网上搜集的已经测试可以使用。现在把他发大家希望大家能够用上。实例实现了,Asp.net中应用Jquery FlexBox实现可输入,可选择的下拉框。而且可以自动从数据库中匹配数据,实现自能提示效果。 源码下载地址:...

Global site tag (gtag.js) - Google Analytics