Posts Tagged ‘ComboBox’

How to combine the power of a Flex Tree control within a ComboBox

// July 22nd, 2009 // 15 Comments » // Flex framework

I’ve found a good example of how to nest a Flex Tree into a ComboBox with only one issue: the selected tree node wasn’t shown once you close and open back the combo box. So I’ve decided to rewrite the component from scratch trying to remove that issue. The result is shown below.

Here is the mxml code of the example shown above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:wg="com.webgriffe.components.*" 
    creationComplete="loadXML()"> 
 
  <mx:Script> 
  <![CDATA[ 
      import mx.collections.XMLListCollection; 
      import mx.rpc.events.ResultEvent; 
      import mx.rpc.http.mxml.HTTPService; 
 
      public var xmlService:HTTPService = new HTTPService(); 
 
      [Bindable]
      public var xmlResult:XML;
 
      [Bindable] 
      public var xmlList:XMLList;
 
      [Bindable] 
      public var xmlTeams:XMLListCollection; 
 
    public function loadXML():void 
    { 
      xmlService.url = "mlb.xml"                 
      xmlService.resultFormat = "e4x"; 
      xmlService.addEventListener(ResultEvent.RESULT, resultHandler); 
      xmlService.send(); 
    } 
 
    public function resultHandler(event:ResultEvent):void 
      { 
         xmlResult = XML(event.result); 
         xmlList = xmlResult.league; 
         xmlTeams = new XMLListCollection(xmlList); 
      } 
  ]]> 
  </mx:Script> 
  <wg:TreeComboBox 
      width="200" treeHeight="250" 
      dataProvider="{xmlTeams}"
      labelField="@label" />
</mx:Application>

To implement a Flex Tree within a ComboBox we have to reassign the default ComboBox dropdownFactory. By default it’s a List control so we assign it a customized Tree control and add some code to let both the components know each other in order to bind their behaviours. By binding behaviours i mean:

  • When you open the ComboBox, the Tree must be expanded in order to show the selected node.
  • When you select a node in the Tree, the ComboBox text should be assigned the selected node’s label.

Click here to download a zip file with the source files.

I wan to greet the authors of the following articles which represented the starting point of my work:

Enjoy!