自定义ComboBox时的注意事项

    今天自定义了ComboBox组件，现将自定义过程中需要注意的事项记录下来，以方便以后需要自定义的哥们少走弯路。

1.使用自己的ItemRender以后，很可能造成comboboxD容器dropdown的滚动条消失，combobox提供了dropdown的宽度的设置入口，却没有提供设置dropdown的入口，但他提供了获得dropdown的方法，于是你欣喜若狂，因为通常我们获得了某个组件，自然就可以设置更改这个组件的高度了，但是当你设定dropdown的高度后，你会发现结果并不是我们想象的那样，呵呵，我想这种结果正好向我们告知了flex的设计者只提供对dropdown的width的改变接口而不提供对heigth改变的接口的原因。咋办？终于找到解决的办法，你设定rowcount以后滚动条就自然出现了！

2.当你用自己的ItemRender后，而且你的渲染器中也出现了滚动条，此时一旦你用鼠标操作Render的滚动条部分，以查看Render的剩余未显示的内容，combobox就会close掉，但是这时候我们只是希望看到未显示的内容，并不希望combobox close掉，又得自己处理下了，监听ItemRender的Click事件，如果event.target是滚动条部分（Button or ScrollThumb）派发的就阻止事件继续进行.

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"  horizontalGap="50"
        verticalAlign="middle"
        backgroundColor="white" creationComplete="init()">
 
 <mx:Script>
  <![CDATA[
   import mx.events.ItemClickEvent;
   import mx.events.ListEvent;
   import flash.utils.setTimeout;
   import mx.controls.Button;
   import mx.controls.scrollClasses.ScrollThumb;
   import mx.collections.ArrayCollection;
  
   [Bindable]
   internal var arr:ArrayCollection = new ArrayCollection();
   
   private function init():void {
    var m:MataterInfo = new MataterInfo();
    m.label = "Apple";
    m.url = "apple.com";
    
    
    var mm:MataterInfo = new MataterInfo();
    mm.label = "IBM";
    mm.url = "ibm.com";
    
    var mmm:MataterInfo = new MataterInfo();
    mmm.label = "Lenovo";
    mmm.url = "Lenovo.com";
    
    var mmmm:MataterInfo = new MataterInfo();
    mmmm.label = "Acer";
    mmmm.url = "acer.com";
    
    var o:MataterInfo = new MataterInfo();
    o.label = "asdfk";
    var oo:MataterInfo = new MataterInfo();
    oo.label = "卡上地方";
    var ooo:MataterInfo = new MataterInfo();
    ooo.label = "000---asd";
    var oooo:MataterInfo = new MataterInfo();
    oooo.label = "222";
    
    m.children = new ArrayCollection([o]);
    mm.children = new ArrayCollection([oo]);
    mmm.children = new ArrayCollection([ooo]);
    mmmm.children = new ArrayCollection([oooo]);
    
    arr.addItem(m);
    arr.addItem(mm);
    arr.addItem(mmm);
    arr.addItem(mmmm);
   }
   
   internal function treeClickHandler(event:MouseEvent):void {
    var obj:* = event.target;
    if(obj is ScrollThumb || obj is Button){
     event.stopPropagation();
    }
   }
   
   internal function itemClickEHandler(event:ListEvent):void {
    var target:Object = event.target;
    var m:MataterInfo = target["selectedItem"] as MataterInfo;
    if(m){
     setTimeout(delayShowLabel,500,m);
    }
   }
   
   private function delayShowLabel(m:MataterInfo):void {
    //myCom.selectedItem = m;
   }
   
   private function comChangeHandler():void {
    
   }
   
  ]]>
 </mx:Script>
   
 <mx:ComboBox id="myCom" prompt="分类选择" dataProvider="{arr}" rowCount="3" change="comChangeHandler()">
  <mx:itemRenderer>
   <mx:Component>
    <mx:Tree width="50" height="60"
       dataProvider="{data}"
       labelField="label"
       itemClick="outerDocument.itemClickEHandler(event)"
       click="outerDocument.treeClickHandler(event)"/>
   </mx:Component>
  </mx:itemRenderer>
 </mx:ComboBox> 
</mx:Application>