Flex编程求助:实现如图所示的功能。即增加和删除一组下拉框组建(Combobox),求高手给些详细代码。如图

图:图片中是由TestInput和ComboBox组成的一行,增加或删除它们组成的一行。请高手指教。过后定追加分... 图:
图片中是由TestInput 和ComboBox组成的一行,增加或删除它们组成的一行。请高手指教。过后定追加分
展开
 我来答
百度网友5cf2587
2011-09-15 · TA获得超过233个赞
知道小有建树答主
回答量:174
采纳率:100%
帮助的人:228万
展开全部

你的这个问题,如果基于界面大小增加这样一组组件,直接用变量控制计数也可以实现,但这样就不具有通用敬扰性,桥态如果亮消旦用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()

{

}

}

}

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式