6 Replies Latest reply on Oct 20, 2006 7:05 AM by aBill

    Passing Data from ComboBox to ListBox.

    drewjones
      Hi everyone, I'm new with the whole flex 2 environment and i'm need some help getting data passed from a ComboBox to ListBox. I don't know whether i'm going about this the right way. Senario, the person using this application will be able to select an item in the ComboBox and based on the item selected, the listBox get data(using an array variable) assigned to that item in the ComboBox. I don't know the syntax that is used to achieve this. I'll appreciate any information related to getting this problem resolved.
        • 1. Re: Passing Data from ComboBox to ListBox.
          aBill Level 1
          Hi

          Try this sample code
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApp()">

          <mx:Script>
          <![CDATA[
          import mx.collections.*;

          public var mylist:Array ;
          private function initApp():void
          {
          mylist = [ {label:"a",data:[{label:"a1",data:1}, {label:"a2",data:2},{label:"a3",data:3}]},
          {label:"b",data:[{label:"b1",data:1}, {label:"b2",data:1},{label:"b3",data:1}]},
          {label:"c",data:[{label:"c1",data:1}, {label:"c2",data:1},{label:"c3",data:1}]},
          {label:"d",data:[{label:"d1",data:1}, {label:"d2",data:1},{label:"d3",data:1}]}] ;
          cb.dataProvider = new ArrayCollection(mylist);
          }

          ]]>
          </mx:Script>
          <mx:ComboBox id="cb" change="listbox.dataProvider=cb.selectedItem.data"/>
          <mx:List id="listbox" width="100"/>

          </mx:Application>

          William Chan
          • 2. Re: Passing Data from ComboBox to ListBox.
            drewjones Level 1
            Thanks for the feedback william, it was helpful but it still not entirely what i want the list box and combo box to do. After the array has been populated in the list box, a selection of item can be made to display further details of the item in the list box. A quick question will be can parallel array type be created in Flex? Trying to accomplish department phone book. The people can select the department and it will show the list of people in that department. In the list box a selection of the person can be made to display more detailed info about the person as name, phone number, job title and etc. So far i'm not able to get the connect between the combo and list box to display detail person info. Need Help, all suggestions will be greatly appreciated. Here's my code so far:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

            <mx:Style>
            Panel
            {
            borderStyle: solid;
            headerColors: #e7e7e7, #d9d9d9;
            backgroundAlpha: 100;
            paddingTop: 10;
            }

            </mx:Style>

            <mx:ArrayCollection id="ITpeople">
            <mx:Object>
            <mx:image>images/andrewo.gif</mx:image>
            <mx:name>John Doe</mx:name>
            <mx:title>Weblayout Specialist</mx:title>
            <mx:phonenum>ext. 1028</mx:phonenum>
            <mx:description>IT Department</mx:description>
            </mx:Object>
            </mx:ArrayCollection>

            <mx:ArrayCollection id="Company">
            <mx:Object>
            <mx:comp>IT</mx:comp>
            </mx:Object>
            <mx:Object>
            <mx:comp>Accounting</mx:comp>
            </mx:Object>
            <mx:Object>
            <mx:comp>Customer Service</mx:comp>
            </mx:Object>

            </mx:ArrayCollection>
            <mx:Script>
            <![CDATA[

            import mx.collections.*;


            ]]>
            </mx:Script>


            <mx:Panel layout="absolute" left="10" top="10" right="54" bottom="200" title="ICM Phone Directory">

            <mx:ComboBox x="10" y="32" id="cbxCompDept" dataProvider="{Company}" labelField="comp" selectedIndex="0" >

            </mx:ComboBox>
            <mx:List id="names" dataProvider="{ITpeople}" labelField="name" selectedIndex="0" x="10" y="95" height="268" width="165"></mx:List>
            <mx:VBox width="416" y="95" x="206">
            <mx:Image id="picture" source="{ITpeople.getItemAt(names.selectedIndex).image}" autoLoad="true" />
            <mx:Form id="details">
            <mx:FormItem label="Name: ">
            <mx:Label id="nameInput" text="{ITpeople.getItemAt(names.selectedIndex).name}"/>
            </mx:FormItem>
            <mx:FormItem label="Title: ">
            <mx:Label id="titleInput" text="{ITpeople.getItemAt(names.selectedIndex).title}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone Number: ">
            <mx:Label id="phoneInput" text="{ITpeople.getItemAt(names.selectedIndex).phonenum}"/>
            </mx:FormItem>
            <mx:FormItem label="Department/Company: ">
            <mx:Label id="descInput" text="{ITpeople.getItemAt(names.selectedIndex).description}" height="120" width="200" />
            </mx:FormItem>
            </mx:Form>
            </mx:VBox>

            </mx:Panel>

            </mx:Application>
            • 3. Re: Passing Data from ComboBox to ListBox.
              aBill Level 1
              Hi

              To show the way you want should have a arraycolleciton of department object, and the department contains its name and arraycollection of employees. If you don't want to change your data structure, you can use filterFunction. The code is posted on next reply

              William Chan
              • 4. Re: Passing Data from ComboBox to ListBox.
                aBill Level 1
                Filter Function solution:

                <?xml version="1.0"?>
                <Application xmlns=" http://www.adobe.com/2006/mxml" creationComplete="initApp()">
                <Script>
                <![CDATA[
                import mx.collections.ArrayCollection;
                private var filFuncs:Array;
                [Bindable]
                public var employeeAC:ArrayCollection;
                private function initApp():void
                {
                var employees:Array = [
                {lastName:"Ada",firstName:"Red",department:"IT"},
                {lastName:"Bill",firstName:"Green",department:"Marketing"},
                {lastName:"Cathy",firstName:"Purple",department:"IT"},
                {lastName:"David",firstName:"Orange",department:"Sales"},
                {lastName:"Edward",firstName:"Blue",department:"Sales"}
                ];
                employeeAC = new ArrayCollection(employees);
                filFuncs = getUniques(employeeAC,"department");
                depts.dataProvider=filFuncs;
                employeeAC.filterFunction = filFuncs[0].data;
                employeeAC.refresh();
                }

                private function getUniques(list:ArrayCollection, field:String):Array
                {
                var map:Object = new Object();
                var fieldValue:String;
                var filter:Function;
                var uniques:Array = new Array();
                for (var i:int=0; i<list.length; i++)
                {
                fieldValue = list.getItemAt(i)[field];
                if (map[fieldValue] == null)
                {
                map[fieldValue] = "exist";
                filter = createFilter(field,fieldValue);
                uniques.push({label:fieldValue,data:filter});
                }
                }
                return uniques;
                }

                private function createFilter(field:String,value:String):Function
                {
                return function (o:Object):Boolean {
                if (o[field] == value)
                return true;
                else
                return false;
                }
                }
                ]]>
                </Script>
                <ComboBox id="depts" change="employeeAC.filterFunction=depts.selectedItem.data;employeeAC.refresh()"/>
                <DataGrid dataProvider="{employeeAC}"/>
                </Application>
                • 5. Re: Passing Data from ComboBox to ListBox.
                  aBill Level 1
                  you can just use one filterFunction:

                  <?xml version="1.0"?>
                  <Application xmlns=" http://www.adobe.com/2006/mxml" creationComplete="initApp()">
                  <Script>
                  <![CDATA[
                  import mx.collections.ArrayCollection;
                  private var filFuncs:Array;
                  [Bindable]
                  public var employeeAC:ArrayCollection;
                  private function initApp():void
                  {
                  var employees:Array = [
                  {lastName:"Ada",firstName:"Red",department:"IT"},
                  {lastName:"Bill",firstName:"Green",department:"Marketing"},
                  {lastName:"Cathy",firstName:"Purple",department:"IT"},
                  {lastName:"David",firstName:"Orange",department:"Sales"},
                  {lastName:"Edward",firstName:"Blue",department:"Sales"}
                  ];
                  employeeAC = new ArrayCollection(employees);
                  filFuncs = getUniques(employeeAC,"department");
                  depts.dataProvider=filFuncs;
                  employeeAC.filterFunction = deptFilter;
                  employeeAC.refresh();
                  }
                  private var field:String;
                  private function getUniques(list:ArrayCollection, field:String):Array
                  {
                  this.field = field;
                  var map:Object = new Object();
                  var fieldValue:String;
                  var filter:Function;
                  var uniques:Array = new Array();
                  for (var i:int=0; i<list.length; i++)
                  {
                  fieldValue = list.getItemAt(i)[field];
                  if (map[fieldValue] == null)
                  {
                  map[fieldValue] = "";
                  uniques.push({label:fieldValue});
                  }
                  }
                  return uniques;
                  }

                  private function deptFilter(obj:Object):Boolean
                  {
                  if (obj[field] == depts.selectedLabel)
                  return true;
                  else
                  return false;
                  }
                  ]]>
                  </Script>
                  <ComboBox id="depts" change="employeeAC.refresh()"/>
                  <DataGrid dataProvider="{employeeAC}"/>
                  </Application>
                  • 6. Re: Passing Data from ComboBox to ListBox.
                    aBill Level 1
                    Create a new Data Structure which work for combo + list
                    <?xml version="1.0"?>
                    <Application xmlns=" http://www.adobe.com/2006/mxml" creationComplete="initApp()">
                    <Script>
                    <![CDATA[
                    import mx.collections.ArrayCollection;
                    private var newArray:Array;
                    private var employees:Array;
                    private function initApp():void
                    {
                    employees = [
                    {lastName:"Ada",firstName:"Red",department:"IT"},
                    {lastName:"Bill",firstName:"Green",department:"Marketing"},
                    {lastName:"Cathy",firstName:"Purple",department:"IT"},
                    {lastName:"David",firstName:"Orange",department:"Sales"},
                    {lastName:"Edward",firstName:"Blue",department:"Sales"}
                    ];
                    newArray = newDataStructure(employees, "department");
                    depts.dataProvider = newArray;
                    }
                    private function newDataStructure(list:Array, field:String):Array
                    {
                    var map:Object = new Object();
                    var fieldValue:String;
                    var filter:Function;
                    var uniques:Array = new Array();
                    for (var i:int=0; i<list.length; i++)
                    {
                    fieldValue = list [field];
                    if (map[fieldValue] == null)
                    {
                    map[fieldValue] = new Array();
                    uniques.push({label:fieldValue,data:map[fieldValue]});
                    }
                    map[fieldValue].push(list
                    );
                    trace( fieldValue+ ":"+ map[fieldValue].length);
                    }
                    return uniques;
                    }
                    ]]>
                    </Script>
                    <ComboBox id="depts" />
                    <DataGrid dataProvider="{depts.selectedItem.data}"/>
                    </Application>