FlexComboBoxTree

原创于 2013-09-26 19:52:23 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Flex ComboBox Tree

本文介绍了一个使用Flex开发的自定义组合框组件，该组件结合了ComboBox与Tree的功能，适用于需要展示层级结构数据的应用场景。文章提供了组件的源代码及示例，展示了如何加载XML数据并将其显示在组合框中。

在我的CSDN资源中有项目工程文件。下载导入工程即可看到效果，下面是地址。

http://download.csdn.net/detail/cym_lmy/6326053

MyCombBoxTree1.as

package com.cym
{
import flash.events.MouseEvent;

import flashx.textLayout.events.ScrollEvent;

import mx.collections.IList;
import mx.controls.Alert;
import mx.controls.Tree;
import mx.events.ListEvent;
import mx.managers.PopUpManager;

import spark.components.ComboBox;
import spark.events.DropDownEvent;

public class MyCombBoxTree1 extends ComboBox
{
  private var _tree:Tree;
  private var __dataProvider:IList;
  private var _dropDownWidth:int;
  public var _dropDownHeight:int;
  public var xzqhbm:String;
  public var xzqhbmField:String;
  override protected function createChildren():void {
   addEventListener(DropDownEvent.OPEN, dropDownControllerOpenHandler);
   addEventListener(DropDownEvent.CLOSE, dropDownControllerCloseHandler);
   super.createChildren();
  }
  override public function set dataProvider(value:IList):void {
   __dataProvider = value;
  }
  private function dropDownControllerOpenHandler(event:DropDownEvent):void {
   if (!_tree) {
    _tree = new Tree();
   }
   _tree.dataProvider = __dataProvider;
   _tree.labelField = this.labelField;
   _tree.width = _dropDownWidth ? _dropDownWidth : this.width;
   _tree.height = _dropDownHeight ? _dropDownHeight : 150;
   popUpTree();
   StopLisentEventHandle();
  }

public function dropDownControllerCloseHandler(event:DropDownEvent):void {
  if (this._tree) {
   PopUpManager.removePopUp(this._tree);
   this.textInput.text = this._tree.selectedItem ? this._tree.selectedItem[this._tree.labelField] : '';
   xzqhbm = this._tree.selectedItem ? this._tree.selectedItem[xzqhbmField] : '';
   var treeboxevent:TreecomboboxEvent = new TreecomboboxEvent(xzqhbm);
   this.dispatchEvent(treeboxevent);

  }
}

override protected function dropDownController_closeHandler(event:DropDownEvent):void
{
  if(_tree.selectedItem){
   StartLisentEventHandle();
   super.dropDownController_closeHandler(event);
  }
}

/**
* 定位弹出窗口
*
*/
private function popUpTree():void {
  this._tree.x = this.dropDownController.dropDown.x;
  this._tree.y = this.dropDownController.dropDown.y;
  PopUpManager.addPopUp(this._tree, this);
}
/**
* 停止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。
* */
private function StopLisentEventHandle():void {
  this.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  this.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  this.addEventListener(MouseEvent.MOUSE_WHEEL, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  _tree.addEventListener(MouseEvent.MOUSE_WHEEL, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
}
/**
* 恢复对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。
* */
private function StartLisentEventHandle():void {
  this.removeEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  this.removeEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  this.removeEventListener(MouseEvent.MOUSE_WHEEL, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
  _tree.removeEventListener(MouseEvent.MOUSE_WHEEL, function(e:MouseEvent):void {
   e.stopImmediatePropagation();
  });
}
private function set dropDownHeight(value:int):void {
  this._dropDownHeight = value;
}

  public function MyCombBoxTree1()
  {
   super();
  }
}
}

TreecomboboxEvent.as

package com.cym
{
import flash.events.Event;

public class TreecomboboxEvent extends Event
{
  public static const NAME:String="treecomboboxevent";
  private var _data:Object;
  public function TreecomboboxEvent(data:Object=null)
  {
   super(NAME, false, false);
   this._data=data;
  }
  public function get data():Object
  {
   return _data;
  }

  public function set data(value:Object):void
  {
   _data = value;
  }
}
}

测试

<?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="600"
      xmlns:cym="com.cym.*"
      creationComplete="loadXML()">
<fx:Declarations>
  
</fx:Declarations>
<fx:Script>
  <![CDATA[
   import com.cym.TreecomboboxEvent;

   import mx.collections.ArrayCollection;
   import mx.collections.XMLListCollection;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.http.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.children();
    xmlTeams = new XMLListCollection(xmlList);
    cg.addEventListener(TreecomboboxEvent.NAME,ceshi);
   }
   public function ceshi(event:TreecomboboxEvent):void{
    haha.text=event.data.toString();
   }
  ]]>
</fx:Script>
<fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace cym "com.cym.*";
  mx|Tree{
   defaultLeafIcon:ClassReference(null);
   folderOpenIcon:ClassReference(null);
   folderClosedIcon:ClassReference(null);
  }
</fx:Style>
<mx:HBox>
  <cym:MyCombBoxTree1 id="cg" dataProvider="{xmlTeams}" labelField="@label" _dropDownHeight="200" xzqhbmField="@id"/>
  <s:TextInput id="haha"/>
</mx:HBox>
</s:Application>