Отключить невыделенные элементы в списке После выбора 5 элементов

Question

Im новое для гибкого развития. У меня есть динамически связанный список данных. Мне нужно ограничить пользователя выбором более 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 Мне также нужно включить все флажки обратно, если пользователь unticks некоторые проверки того, что счетчик выбора идти ниже 5

Спасибо

Answer 1

Сначала вам нужно добавить enabled недвижимость в вашем ArrayCollection как ниже которого также находится make bindable in itemRenderer enabled="{data.enabled}". Если count достигнут 5, мы отключим всю кнопку, кроме выбранной, которая помогает с помощью свойства enable и magic здесь нам нужно обновить элементы arraycollection, используя метод mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void, чтобы только он отражал возможность отключения других флажков. В нашем случае используйте externalDocument.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>