Apache flex Flex 4.6 dropDownList selectedIndex值集?
我正在学习“一周内的Flex”教程,我已经达到了他们在Flex中实现MVC模型的程度。在这之前,一切都很顺利,但在视图中,他们使用dropDownList连接到数据提供者,并保留selectedIndex未声明(默认为-1)。我(试图变得聪明!)尝试设置selectedIndex=0或1或任何其他数字。但什么都没发生,我怎么能这样做 课程详情如下: 在我看来,代码的重要部分是: 主应用程序: 已创建阵列:Apache flex Flex 4.6 dropDownList selectedIndex值集?,apache-flex,drop-down-menu,selectedindex,Apache Flex,Drop Down Menu,Selectedindex,我正在学习“一周内的Flex”教程,我已经达到了他们在Flex中实现MVC模型的程度。在这之前,一切都很顺利,但在视图中,他们使用dropDownList连接到数据提供者,并保留selectedIndex未声明(默认为-1)。我(试图变得聪明!)尝试设置selectedIndex=0或1或任何其他数字。但什么都没发生,我怎么能这样做 课程详情如下: 在我看来,代码的重要部分是: 主应用程序: 已创建阵列: [Bindable] private v
[Bindable]
private var employees:ArrayCollection = new ArrayCollection();
此阵列由httpservice的日期填充:
for each (var emp:Object in employeeData)
{
employee = new Employee();
employee.firstName = emp.firstName;
employee.lastName = emp.lastName;
employee.id = emp.id;
employee.title = emp.title;
employee.email = emp.email;
employee.managerID = emp.managerID;
employee.department = emp.department;
employee.location = emp.location;
employee.deskLocation = emp.deskLocation;
employee.city = emp.city;
employee.state = emp.state;
employee.countryCode = emp.countryCode;
employee.postalCode = emp.postalCode;
employee.directDial = emp.directDial;
employee.hireDate = emp.hireDate;
employee.evaluation = emp.evaluation;
employee.phone = emp.phone;
employees.addItem(employee);
}
以数组形式传递给自定义组件:
<components:VehicleRequestForm employees="{employees}"/>
这个自定义表单捕获它并放入dropDownList,但是selectedIndex似乎不起作用,它仍然默认为-1。我怎样才能解决这个问题?(感谢所有人):
ex2_08_solutions.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="850"
creationComplete="employeeService.send()"
xmlns:components="components.*">
<!-- Exercise 2.08: Creating an ArrayCollection of value objects -->
<!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Style source="Styles.css"/>
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import valueObjects.Employee;
// variable declarations ------------------------------------
[Bindable]
private var employees:ArrayCollection = new ArrayCollection();
// getter/setters -------------------------------------------
// helper methods -------------------------------------------
// event handlers -------------------------------------------
protected function employeeService_resultHandler(event:ResultEvent):void
{
var employeeData:ArrayCollection = event.result.employees.employee;
var employee:Employee;
for each (var emp:Object in employeeData)
{
employee = new Employee();
employee.firstName = emp.firstName;
employee.lastName = emp.lastName;
employee.id = emp.id;
employee.title = emp.title;
employee.email = emp.email;
employee.managerID = emp.managerID;
employee.department = emp.department;
employee.location = emp.location;
employee.deskLocation = emp.deskLocation;
employee.city = emp.city;
employee.state = emp.state;
employee.countryCode = emp.countryCode;
employee.postalCode = emp.postalCode;
employee.directDial = emp.directDial;
employee.hireDate = emp.hireDate;
employee.evaluation = emp.evaluation;
employee.phone = emp.phone;
employees.addItem(employee);
}
}
protected function employeeService_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Fault Information");
}
]]>
</fx:Script>
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Declarations>
<s:HTTPService id="employeeService"
url="http://adobetes.com/f45iaw100/remoteData/employees.xml"
result="employeeService_resultHandler(event)"
fault="employeeService_faultHandler(event)"/>
</fx:Declarations>
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:Label x="10" y="34"
width="690" height="40"
text="Employee Portal: Vehicle Request Form"
styleName="titleHeader"/>
<components:VehicleRequestForm employees="{employees}"/>
</s:Application>
VehiclerRequestForm.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Script>
<![CDATA[
// import statements ----------------------------------------
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CalendarLayoutChangeEvent;
// variable declarations ------------------------------------
[Bindable]
public var employees:ArrayCollection;
// getter/setters -------------------------------------------
// helper methods -------------------------------------------
// event handlers -------------------------------------------
private function dateChangeHandler(event:CalendarLayoutChangeEvent):void
{
Alert.show('You have selected ' + event.target.selectedDate.toDateString());
if ((event.target.id == "returnDate") && (pickupDate.selectedDate > returnDate.selectedDate))
{
Alert.show("Pickup date must be scheduled before return date.");
}
if ((event.target.id == "pickupDate") && (pickupDate.selectedDate > returnDate.selectedDate) && (returnDate.selectedDate != null))
{
Alert.show("Pickup date must be scheduled before return date.")
}
}
private function init():void
{
pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);
returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);
}
]]>
</fx:Script>
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:Form x="10" y="70">
<s:FormItem label="Employee:">
<s:DropDownList id="dropDownList"
dataProvider="{employees}"
labelField="lastName"
selectedIndex="1"/>
</s:FormItem>
<s:FormItem label="Office Phone:">
<s:TextInput id="phone"
text="{dropDownList.selectedItem.phone}"/>
</s:FormItem>
<s:FormItem label="Mobile Phone:">
<s:TextInput id="mobilePhone"/>
</s:FormItem>
<s:FormHeading label="Dates Requested"/>
<s:FormItem label="Pickup Date:">
<mx:DateChooser id="pickupDate"/>
</s:FormItem>
<s:FormItem label="Return Date:">
<mx:DateChooser id="returnDate"/>
</s:FormItem>
<s:FormItem>
<s:Button id="submitButton"
label="Submit Request"/>
</s:FormItem>
</s:Form>
</s:Group>
返回日期。选择日期)
{
警报。显示(“取货日期必须安排在归还日期之前。”);
}
if((event.target.id==“pickupDate”)&&&(pickupDate.selectedDate>returnDate.selectedDate)&&(returnDate.selectedDate!=null))
{
警报。显示(“收货日期必须安排在退货日期之前。”)
}
}
私有函数init():void
{
pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChangeHandler);
returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChangeHandler);
}
]]>
您不能将selectedIndex
设置为不在数据提供程序中的索引。当您的DropdownList
被实例化时,dataProvider
是一个空集合,因此1不是有效的选定索引
填充集合后,尝试设置您的selectedIndex
。您可能需要在callLater
中执行此操作(数据通常不会立即处理,而是在帧结束时处理。对于某些组件,这非常重要,对于其他组件,您可以忽略它)
如果只需要强制选择,请尝试将requireSelection
设置为true
更新(如何使用callLater)
你可以试试这个
<s:DropDownList requireSelection="true" />
如果为true,则必须始终在控件中选择数据项。如果该值为true,则selectedIndex属性始终设置为介于0和(dataProvider.length-1)之间的值 requireSelection将其硬编码为“0”,我无法控制选择哪一个。你能告诉我你以后怎么用电话吗?我已经查看了adobe网站,但我不清楚如何在这种情况下使用它。在我看来,覆盖commitProperties是一个更好的方法(加上一个标志,让您知道数据已更改,因此所选索引也需要更改)。添加了calllater的用法。
protected function employeeService_resultHandler(event:ResultEvent):void{
//...populating dataprovider
callLater(function():void{
if(dropDownList.dataProvider.length > wantedIndex){
dropDownList.selectedIndex=wantedIndex;
}else{
Alert.show('can\'t select necessary index!','error')
}
});
}
<s:DropDownList requireSelection="true" />