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.

[aBill]

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

[drewjones]

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>

[aBill]

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

[aBill]

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>

[aBill]

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>

[aBill]

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>