스크롤 할 때 itemRenderer의 체크 박스가 선택/선택 취소되었습니다.

Question

This is my application: 


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark"> 

    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.XMLListCollection; 
      import mx.controls.Alert; 
      import mx.events.FlexEvent; 

      import spark.components.gridClasses.IGridItemRenderer; 

      public var modulesXMLList:XMLListCollection; 

      private function onGridInitialize(event:FlexEvent):void{ 
       this.addEventListener('moduleItemChange', onModuleItemChange); 
      } 

      private function onModuleItemChange(event:Event):void{ 
       var item:IGridItemRenderer = event.target as IGridItemRenderer; 

       if(!item || !item.data) 
        //item.data.access = !item.data.access; 
        Alert.show(item.data.sub_module);  
      } 

      protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void 
      { 
       modulesXMLList = new XMLListCollection(tempXML.module as XMLList); 

       modulesXMLList.refresh(); 
       myDatagrid.dataProvider = modulesXMLList; 

      } 

     ]]> 
    </fx:Script> 

    <fx:Declarations> 

     <s:RadioButtonGroup id="rbg1"/> 
     <fx:XML id="tempXML" source="assets/myXMl1.xml"/> 

     <!--<s:ArrayCollection id="moduleControlPanel_DP"> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/> 
     </s:ArrayCollection> 
     --> 
    </fx:Declarations> 


    <s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9" 
       x="20" y="20" width="184" height="176"> 
     <s:columns> 
      <s:ArrayList>     
       <s:GridColumn headerText="Default"> 
        <s:itemRenderer> 
         <fx:Component> 
          <s:GridItemRenderer> 
           <s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="@{data.default}" label="" horizontalCenter="0"/> 
          </s:GridItemRenderer> 
         </fx:Component> 
        </s:itemRenderer> 
       </s:GridColumn> 
       <s:GridColumn headerText="Access" dataField="@access"> 
        <s:itemRenderer> 
         <fx:Component> 
          <s:GridItemRenderer> 

           <fx:Script> 
            <![CDATA[ 

             override public function set data(value:Object):void 
             { 
              // not sure of the details on when or why, but sometimes this method is passed a null value 
              if(value != null) 
              { 
               //super.data = value; 
               // set itemRenderer's state based on data value 
               //chk.selected = value.access; 
               super.data = value; 
               validateNow(); 
              } 
             } 

             protected function Check_clickHandler(even:MouseEvent):void 
             { 

              dispatchEvent(new Event('moduleItemChange', true)); 
             } 
            ]]> 
           </fx:Script> 

           <s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="@{data.access}" horizontalCenter="0"/> 
          </s:GridItemRenderer> 
         </fx:Component> 
        </s:itemRenderer> 
       </s:GridColumn> 
       <s:GridColumn headerText="Sub-Module" dataField="@sub_module" /> 
      </s:ArrayList> 
     </s:columns> 
    </s:DataGrid> 

</s:Application> 



And this my C<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark"> 

    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.XMLListCollection; 
      import mx.controls.Alert; 
      import mx.events.FlexEvent; 

      import spark.components.gridClasses.IGridItemRenderer; 

      public var modulesXMLList:XMLListCollection; 

      private function onGridInitialize(event:FlexEvent):void{ 
       this.addEventListener('moduleItemChange', onModuleItemChange); 
      } 

      private function onModuleItemChange(event:Event):void{ 
       var item:IGridItemRenderer = event.target as IGridItemRenderer; 

       if(!item || !item.data) 
        //item.data.access = !item.data.access; 
        Alert.show(item.data.sub_module);  
      } 

      protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void 
      { 
       modulesXMLList = new XMLListCollection(tempXML.module as XMLList); 

       modulesXMLList.refresh(); 
       myDatagrid.dataProvider = modulesXMLList; 

      } 

     ]]> 
    </fx:Script> 

    <fx:Declarations> 

     <s:RadioButtonGroup id="rbg1"/> 
     <fx:XML id="tempXML" source="assets/myXMl1.xml"/> 

     <!--<s:ArrayCollection id="moduleControlPanel_DP"> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/> 
      <fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/> 
     </s:ArrayCollection> 
     --> 
    </fx:Declarations> 


    <s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9" 
       x="20" y="20" width="184" height="176"> 
     <s:columns> 
      <s:ArrayList>     
       <s:GridColumn headerText="Default"> 
        <s:itemRenderer> 
         <fx:Component> 
          <s:GridItemRenderer> 
           <s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="@{data.default}" label="" horizontalCenter="0"/> 
          </s:GridItemRenderer> 
         </fx:Component> 
        </s:itemRenderer> 
       </s:GridColumn> 
       <s:GridColumn headerText="Access" dataField="@access"> 
        <s:itemRenderer> 
         <fx:Component> 
          <s:GridItemRenderer> 

           <fx:Script> 
            <![CDATA[ 

             override public function set data(value:Object):void 
             { 
              // not sure of the details on when or why, but sometimes this method is passed a null value 
              if(value != null) 
              { 
               //super.data = value; 
               // set itemRenderer's state based on data value 
               //chk.selected = value.access; 
               super.data = value; 
               validateNow(); 
              } 
             } 

             protected function Check_clickHandler(even:MouseEvent):void 
             { 

              dispatchEvent(new Event('moduleItemChange', true)); 
             } 
            ]]> 
           </fx:Script> 

           <s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="@{data.access}" horizontalCenter="0"/> 
          </s:GridItemRenderer> 
         </fx:Component> 
        </s:itemRenderer> 
       </s:GridColumn> 
       <s:GridColumn headerText="Sub-Module" dataField="@sub_module" /> 
      </s:ArrayList> 
     </s:columns> 
    </s:DataGrid> 

</s:Application> 


And this is my XML file: 

<?xml version="1.0" encoding="UTF-8"?> 

<modules> 
    <module habilitation_id="1" module_id="1" sub_module="Sub1" default="true" access="true" /> 
    <module habilitation_id="1" module_id="2" sub_module="Sub2" default="true" access="true" /> 
    <module habilitation_id="1" module_id="2" sub_module="Sub3" default="false" access="false" /> 
    <module habilitation_id="1" module_id="2" sub_module="Sub4" default="false" access="true" /> 
    <module habilitation_id="1" module_id="3" sub_module="Sub5" default="true" access="true" /> 
    <module habilitation_id="1" module_id="3" sub_module="Sub6" default="false" access="true" /> 
    <module habilitation_id="1" module_id="4" sub_module="Sub7" default="true" access="true" /> 
    <module habilitation_id="1" module_id="4" sub_module="Sub8" default="false" access="true" /> 
</modules> 




Anyone please throw some lights. 

Answer 1

이것은 재미 있습니다. 나는 그걸로 잠시 도망 쳤다. 아이템 렌더러가 파괴되어 화면 밖으로 스크롤 될 때 재사용됩니다. 따라서 그것은 선택되지 않은 것으로 보입니다. 기억이 맞으면 컨트롤을 데이터 객체의 값으로 업데이트하는 렌더러의 메서드에 바인딩 해 봅니다. 예 : <s:checkbox selected={myMethod(data.selected)} /> 또는 렌더러에서 업데이트 이벤트를 찾아 값을 설정하십시오.

Answer 2

그냥이 게시물을보고 아직 어떤 대답을 수락하지 않은 것 같다

귀하의 항목 렌더러 :

override public function set data(value:Object):void 
{ 
    if(value != null) 
    { 
     super.data = value; 
     //chk.selected = value.access; 
     validateNow(); 
    } 
} 

주석 위의 줄 : //chk.selected = value.access;

Flex DataGrid는 더 나은 메모리 성능을 위해 itemRenderers를 재활용합니다. itemRenderer에서 CheckBox를 선택하고 스크롤을 시작하면 체크 된 상자가있는 해당 itemRenderer가 selected = "true"값이 설정된 다른 레코드를 표시하기 위해 다시 사용됩니다.

따라서 확인란의 값을 명시 적으로 설정해야합니다. 이 예제에서 value.access가 boolean이고 checkbox를위한 것이면 확실히 작동 할 것입니다.

감사합니다.