4 Replies Latest reply on Dec 4, 2009 1:17 AM by paul.williams

    Display ArrayCollection in a List and reorgnize the ArrayCollection with Drag and Drop

    Johnking08 Level 1

      I have an ArrayCollection created like this

       

      qaAC = new ArrayCollection();

      for (var i:int=0; i<10; ++i) {
           var o:Object = {question:"What is "+i+" ?", answer:"This is "+i};
           qaAC.addItem(o);
      }

       

      The ArrayCollection is an Array of Object that has custimized "question" and "answer" properties.

       

      I want to put the "questions" in the ArrayCollection in a List. "qaAC.question" does not return me an array of questions.

      I have to extract all the questions from the ArrayCollection to form a new Array of String and use the new Array as the dataProvider of the LIst.

      Is there a better and clean way?

       

      My goal is to use a List to reorgnize an ArrayCollection that contains complex Object (not simple String) with Drag&Drop. Is it possible?

      Any suggestions?

        • 1. Re: Display ArrayCollection in a List and reorgnize the ArrayCollection with Drag and Drop
          chris.huston.t10 Level 3

          There is no need to pull out an array from your array collection. You can display any property from the objects in your ArrayCollection. Here is an example app that allows you to change the order of the items through drad and drop. The two lists both use the same DataProvider, but just display a different property. It is important to note that there are not two different ArrayCollections, the two lists both use the same ArrayCollection, so changing the order in one list, also changes the order in the other list.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" initialize="init()">
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                     
                      private function init():void {
                          var qaAC:ArrayCollection = new ArrayCollection();
                         
                          for (var i:int=0; i<10; ++i) {
                              var o:Object = {question:"What is "+i+" ?", answer:"This is "+i};
                              qaAC.addItem(o);
                          }
                          questionList.dataProvider = qaAC;
                          answerList.dataProvider = qaAC;
                      }
                  ]]>
              </mx:Script>
              <mx:List id="questionList" labelField="question" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" height="250" width="100"/>
              <mx:List id="answerList" labelField="answer" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" height="250" width="100"/>
          </mx:Application>

           

          I hope this helps.

           

          Chris

          1 person found this helpful
          • 2. Re: Display ArrayCollection in a List and reorgnize the ArrayCollection with Drag and Drop
            Johnking08 Level 1

            Chris, It is helpful.

             

            I only have one list (the question list) in qaAC displayed:

             

            <mx:List id="questionList" labelField="question" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" height="250" width="100"/>

             

            If I drag & drop the item in the question list, the order of the items in the question list in the qaAC is changed, what about the order of items in

            the answer list in qaAC? Does it follow the change in the question list?

            • 3. Re: Display ArrayCollection in a List and reorgnize the ArrayCollection with Drag and Drop
              chris.huston.t10 Level 3

              I put two lists in my example to show how the ArrayCollection could be displayed in two different ways. You do not have to have two lists if you do not need them.

               

              When you change the order of the list with drag and drop, you are changing the order of the qaAC ArrayCollection, so all controls that display the qaAC will also be updated to reflect the new order. You can try this out in the example I posted earlier. Change the order in the question list and you will see the order also changes in the answer list. This is because they are both bound to the same ArrayCollection. If you wanted them to behave independently, you would need two separate ArrayCollections.

               

              Chris

              • 4. Re: Display ArrayCollection in a List and reorgnize the ArrayCollection with Drag and Drop
                paul.williams Level 4

                <List dataProvider="{qaAC}" labelField="question"/>