flex ComboBox控制項 學習

ComboxBox控制項就是 下拉框，在flex中變得更炫了。讓使用者使用起來更方便。

ComboxBox控制項

1. 動態添加資料

首先：建立一個數組進行資料的儲存。再在ComboBox控制項 dataProvider屬性進行綁定。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   
   [Bindable]
   private var monthslist:Array=[{label:"一月",value:0},{label:"二月",value:1},{label:"三月",value:2},{label:"四月", value:3},{label:"五月", value:4}];
   
  ]]>
 </mx:Script>
 <mx:ComboBox x="129" y="78" id="cbb1" dataProvider="{monthslist}" ></mx:ComboBox>
  
</mx:Application>

 

2.添加固定資料

 <mx:ComboBox id="myCBox" x="256" y="78">
     <mx:Array id="status">
         <mx:Object label="元旦" value="0"/>
         <mx:Object label="冬天" value="1"/>
         <mx:Object label="侄子生日" value="2"/>
         <mx:Object label="老婆生日" value="3"/>
         <mx:Object label="我的生日" value="4"/>
         <mx:Object label="哥們生日" value="5"/>
         <mx:Object label="夏天" value="6"/>
       </mx:Array>
    </mx:ComboBox>

 

3.兩個ComboBox控制項聯動

建立一個getlist()方法，動態擷取對應月份的資訊。

對象id.selectedItem.value //擷取選中對象value值

對象id.selectedIndex //顯示選中對象值

   private function getlist():void
   {
    var vv:String=cbb1.selectedItem.value;
    myCBox.selectedIndex=int(vv);
   }

 

圖：

 

完整代碼：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   
   [Bindable]
   private var monthslist:Array=[{label:"一月",value:0},{label:"二月",value:1},{label:"三月",value:2},{label:"四月", value:3},{label:"五月", value:4}];
   
   private function getlist():void
   {
    var vv:String=cbb1.selectedItem.value;
    myCBox.selectedIndex=int(vv);
   }
  ]]>
 </mx:Script>
 <mx:ComboBox x="129" y="78" id="cbb1" dataProvider="{monthslist}" change="getlist()"></mx:ComboBox>
 
 <mx:ComboBox id="myCBox" x="256" y="78">
     <mx:Array id="status">
         <mx:Object label="元旦" value="0"/>
         <mx:Object label="冬天" value="1"/>
         <mx:Object label="侄子生日" value="2"/>
         <mx:Object label="老婆生日" value="3"/>
         <mx:Object label="我的生日" value="4"/>
         <mx:Object label="哥們生日" value="5"/>
         <mx:Object label="夏天" value="6"/>
       </mx:Array>
    </mx:ComboBox>
   
</mx:Application>

試試吧！希望能互相探討！