Flex编程求助：实现如图所示的功能。即增加和删除一组下拉框组建（Combobox），求高手给些详细代码。如图
图片中是由TestInput 和ComboBox组成的一行，增加或删除它们组成的一行。请高手指教。过后定追加分 展开
你的这个问题，如果基于界面大小增加这样一组组件，直接用变量控制计数也可以实现，但这样就不具有通用性，如果用list和list的ItemRenderer来解决就可以比较方便一些。谈下个人的思路，纯属个人观点。
1、做一个数据结构，如：ListData，包括UI上一行组件对应的数据，另外附加一个index作为数据索引，方便后期处理。
2、定义一个list的ItemRenderer，ItemRenderer的布局按照你UI上对应的一行进行设计。将其中的组件绑定一个DataList中的数据，这些数据默认值都为空。
3、在图片呈现的UI上，放置一个List组件，其ItemRenderer赋予（2）中定义的ItemRenderer
4、定义一个Array（Array的数据就是ListData类型），作为List的DataProvider，对应按钮“增加”和“减少”的操作就是对ListDataProvider进行修改了，也即增加或者删除一条数据。右侧的呈现会以列表的方式。
5、处理右侧组件中的数据，其实就是对List的数据源进行一次遍历。通过索引可以定位到指定的行，进行相关的处理。
我做了一下，附下代码：
1）主应用的mxml文件：
<?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)"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var listDataSource:ArrayCollection;
private var rowCount:Number = 0;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
listDataSource = new ArrayCollection();
rowCount += 1;
var obj:DataList = new DataList();
obj.index = 1;
obj.text1 = String(rowCount);
obj.text2 = idStrText.text + String(rowCount);
listDataSource.addItem(obj);
}
protected function idBtnAdd_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
rowCount += 1;
var obj:DataList = new DataList();
obj.index = 1;
obj.text1 = String(rowCount);
obj.text2 = idStrText.text + String(rowCount);
listDataSource.addItem(obj);
}
protected function idBtnReduce_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(rowCount > 0)
listDataSource.removeItemAt(--rowCount);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Label text="指定字符串" top="42" left="10" />
<s:TextInput id="idStrText" top="55" left="10" width="66" text="Text"/>
<s:Button id="idBtnAdd" label="增加" left="10" top="100" width="66"
click="idBtnAdd_clickHandler(event)"
/>
<s:Button id="idBtnReduce" label="减少" left="10" top="128" width="66"
click="idBtnReduce_clickHandler(event)"
/>
<s:List left="100" top="10" right="10" bottom="10" borderAlpha="0"
itemRenderer="CustomListRenderer"
dataProvider="{listDataSource}" />
</s:Application>
2）自定义List的ItemRenderer
<?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="false"
>
<s:TextInput left="0" top="2" width="80" bottom="2" text="{data.text1}" />
<!--可以预先定义下拉选项的内容-->
<s:ComboBox left="84" top="2" width="120" bottom="2" selectedIndex="{data.combobox1}"/>
<s:ComboBox left="208" top="2" width="120" bottom="2" selectedIndex="{data.combobox2}" />
<s:ComboBox left="332" top="2" width="120" bottom="2" selectedIndex="{data.combobox3}" />
<s:TextInput left="454" top="2" width="80" bottom="2" text="{data.text2}" />
<s:ComboBox left="538" top="2" width="120" bottom="2" selectedIndex="{data.combobox4}" />
</s:ItemRenderer>
3）自定义数据结构DataList类：
package
{
public class DataList
{
[Bindable]
public var index:Number;
[Bindable]
public var text1:String;
[Bindable]
public var text2:String;
[Bindable]
public var combobox1:Number;
[Bindable]
public var combobox2:Number;
[Bindable]
public var combobox3:Number;
[Bindable]
public var combobox4:Number;
public function DataList()
{
}
}
}
