0

私は「Flex in a week」チュートリアルから学んでおり、Flex で MVC モデルを実装するところまで来ました。その時点まではすべて問題ありませんでしたが、ビューでは dropDownList を使用して dataProvider に接続し、selectedIndex を宣言しないままにします (デフォルトは -1)。私は(賢くしようとしています!)selectedIndex = 0または1またはその他の数値に設定しようとしています。しかし、何も起こりません。どうすればこれを行うことができますか?

レッスン詳細はこちら:

http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_06.html

私の意見では、コードの重要な部分は次のとおりです。

メインアプリ:

配列が作成されます:

            [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 のままです。どうすればこれを修正できますか? (すべての理想が高く評価されます):

        <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}"/>

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>

VehicleRequestForm.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>
4

2 に答える 2

1

selectedIndexにないインデックスには設定できませんdataProviderDropdownListインスタンス化されたときdataProviderは空のコレクションであるため、1 は選択された有効なインデックスではありません。

selectedIndexコレクションにデータを入力した後、設定を試みてください。これを行う必要がある場合がありますcallLater(通常、データはすぐに処理されるのではなく、フレームの最後に処理されます。一部のコンポーネントではこれは非常に重要ですが、他のコンポーネントでは無視できます)。

選択を強制する必要がある場合は、 に設定requireSelectionしてみてくださいtrue

更新(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')
                }
            });
}
于 2013-07-27T10:41:13.407 に答える
0

あなたはこれを試すことができます、

<s:DropDownList requireSelection="true" />

true の場合、データ項目は常にコントロールで選択する必要があります。値が true の場合、selectedIndex プロパティは常に 0 ~ (dataProvider.length - 1) の値に設定されます。

于 2014-03-19T21:13:10.453 に答える