在列表中禁用未選定的項目選擇5個項目後

Question

我是flex開發的新成員。我有一個動態數據綁定列表組件。我需要限制用戶選擇超過5個項目。

列表由具有複選框和標籤

getSelectionCount（）方法返回的當前選擇項的數目。

這裏是我的代碼

<s:VGroup width="100%" height="100%">   
    <s:List id="chkLst" visible="{isMultipleSelectionAllowed}" width="100%" height="100%" borderVisible="false" 
      fontFamily="segoeui" 
      dataProvider="{filteredDataSet}" > 
     <s:itemRenderer> 
      <fx:Component> 
       <s:ItemRenderer> 

        <fx:Script> 
         <![CDATA[ 
          import mx.controls.Alert;  

          //----------------------------------------------- 
          // 
          // Checkbox select 
          // 
          //----------------------------------------------- 


          protected function chk_clickHandler(event:MouseEvent):void 
          { 
           var selection:Array = new Array(); 

           for each(var item:Object in outerDocument.chkLst.dataProvider) 
           {   
            selection.push(item); 
           } 

           var count:int = 0; 
           for each(var sItem:Object in selection) 
           { 
            outerDocument.setSelectionCount(0); 

            if(sItem.selected) 
            {          
             count++; 
            } 
            outerDocument.setSelectionCount(count); 
           } 

           Alert.show(outerDocument.getSelectionCount()+"","test"); 

           if(CheckBox(event.target).selected && outerDocument.getSelectionCount() <= 5){ 

             outerDocument.setSelectionCount(outerDocument.getSelectionCount()+1); 

           } 


           if(outerDocument.getSelectionCount() >= 6){ 


           } 

          } 
         ]]> 
        </fx:Script> 

        <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true"> 
         <s:CheckBox id="chk" 
            label="{data.label}" change="{data.selected = chk.selected}" selected="{data.selected}" 
            maxWidth="215" click="chk_clickHandler(event)" /> 
        </s:HGroup> 
       </s:ItemRenderer> 
      </fx:Component> 
     </s:itemRenderer> 
    </s:List> 

1. 如何禁用該用戶，當用戶選擇計數超過5沒有複選框的選中狀態？

2我還需要啓用所有複選框回來，如果用戶爲了選擇計走低於5

謝謝

Answer 1

首先，你需要在你的ArrayCollection像添加enabled財產unticks一些檢查以下也是make bindable的條目Renderer enabled="{data.enabled}"。如果計數達到5，我們禁用除了所選按鈕之外的所有按鈕，在此處我們需要使用mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void方法來更新arraycollection項目，以便僅反映禁用其他複選框。在我們的例子中，使用outerDocument.chkLst.dataProvider.itemUpdated（item）;

樣品ArrayCollection的結構：

 <fx:Declarations> 
      <s:ArrayCollection id="filteredDataSet" > 
       <fx:Object selected="false" enabled="true" label="one"/> 
       <fx:Object selected="true" enabled="true" label="two"/> 
       <fx:Object selected="false" enabled="true" label="three"/> 
       <fx:Object selected="false" enabled="true" label="four"/> 
       <fx:Object selected="false" enabled="true" label="five"/> 
       <fx:Object selected="false" enabled="true" label="six"/> 
       <fx:Object selected="false" enabled="true" label="seven"/> 
       <fx:Object selected="false" enabled="true" label="eight"/> 
       <fx:Object selected="false" enabled="true" label="nine"/>     
      </s:ArrayCollection> 

     </fx:Declarations> 

    <s:List id="chkLst" width="100%" height="100%" borderVisible="false" 
      fontFamily="segoeui" 
      dataProvider="{filteredDataSet}" > 
     <s:itemRenderer> 
      <fx:Component> 
       <s:ItemRenderer>       
        <fx:Script> 
         <![CDATA[ 
          import mx.controls.Alert;  

          protected function chk_clickHandler(event:MouseEvent):void 
          { 
           data.selected = chk.selected; 

           var selection:Array = []; 

           for each(var item:Object in outerDocument.chkLst.dataProvider) 
           {  
            if(item.selected) 
             selection.push(item); 
           }        

           if(selection.length>=5) 
           { 
            for each(var item:Object in outerDocument.chkLst.dataProvider){  
             item.enabled = item.selected;                
             outerDocument.chkLst.dataProvider.itemUpdated(item); 
            } 
           }else{ 
            for each(var item:Object in outerDocument.chkLst.dataProvider){  
             item.enabled = true;               
             outerDocument.chkLst.dataProvider.itemUpdated(item); 
            } 
           } 

          } 
         ]]> 
        </fx:Script> 

        <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true"> 
         <s:CheckBox id="chk" label="{data.label}" selected="{data.selected}" enabled="{data.enabled}" 
            maxWidth="215" click="chk_clickHandler(event)" /> 
        </s:HGroup> 
       </s:ItemRenderer> 
      </fx:Component> 
     </s:itemRenderer> 
    </s:List>