DataGrid ItemRenderer 오류

Question

간단한 XML 파일을 사용하여 내 DataGrid의 3 열을 채 웁니다. 마지막 열은 itemrenderer, 기본적으로 Button으로 간주됩니다. 그러나 버튼은 XML 파일의 값에 따라 "true"또는 "false"인 DataGrid의 세 번째 열의 특정 행에만 표시되어야합니다. 그래서 기본적으로 itemrenderer에있는 버튼의 Visible 속성을 true 또는 false로 설정하려고합니다.

Here is the whole application 

    <?xml version="1.0" encoding="utf-8"?> 
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" pageTitle="Dynamic Data Grid"> 
     <!-- <s:layout> 
     <s:VerticalLayout horizontalAlign="center"/> 
     </s:layout>--> 

     <fx:Declarations> 
      <s:ArrayList id="cccb_dp"> 
       <fx:String>User1</fx:String> 
       <fx:String>User2</fx:String> 
       <fx:String>User3</fx:String> 
      </s:ArrayList> 

      <fx:XML id="tempXML" source="assets/fieldsXML.xml"/> 
      <s:XMLListCollection id="fieldsXMLList" source="{tempXML.worker}"/> 

     </fx:Declarations> 

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

     <s:VGroup verticalAlign="middle" horizontalCenter="1" verticalCenter="1" horizontalAlign="center"> 

      <s:HGroup horizontalAlign="center" verticalCenter="-221" width="580" height="158" x="75"> 
       <s:Label text="CC" width="23" height="24" verticalAlign="middle" fontWeight="bold"/> 
       <s:DropDownList id="cc_cb" dataProvider="{cccb_dp}" width="175"/> 
      </s:HGroup> 

      <mx:DataGrid id="myDG" dataProvider="{fieldsXMLList}"> 
       <mx:columns> 
        <mx:DataGridColumn headerText="Header1" dataField="@field_label"/> 
        <mx:DataGridColumn headerText="Header2" dataField="@field_value"/> 
        <mx:DataGridColumn headerText="Header3"> 
         <mx:itemRenderer> 
          <fx:Component> 
           <s:Button click="onClick(event)" label="Click Me" dataChange="onDataChange(event)" > 
            <fx:Script> 
             <![CDATA[ 
              import mx.controls.Alert; 

              private function onClick(evt:Event):void 
              { 
               Alert.show(data.@field_visibility); 
              } 
              private function onDataChange(evt:Event):void 
              { 
               visible=data.@field_visibility; 
              } 
             ]]> 
            </fx:Script> 
           </s:Button> 
          </fx:Component> 
         </mx:itemRenderer> 
        </mx:DataGridColumn> 
       </mx:columns> 
      </mx:DataGrid> 

     </s:VGroup> 

    </s:Application> 


    The XML: 
    <worker_fields> 
     <worker id="1" field_label="Seller" field_value="5" field_visibility="false"/> 
     <worker id="1" field_label="Balance" field_value="100" field_visibility="true"/> 
     <worker id="1" field_label="Cash Owned" field_value="300" field_visibility="true"/> 

     <worker id="2" field_label="Seller" field_value="5" field_visibility="false"/> 
     <worker id="2" field_label="Balance" field_value="130" field_visibility="true"/> 
     <worker id="2" field_label="Cash Owned" field_value="132" field_visibility="false"/> 
     <worker id="2" field_label="Credits" field_value="131" field_visibility="true"/> 
    </worker_fields>  


Any idea how to go around it. 

Thanks you for the precious help. 

Answer 1

각 itemRenderer는 데이터 객체를 가져옵니다. 렌더러가 표시하고있는 요소가 포함되어 있습니다. 기본 속성이 아니기 때문에 렌더러에서 field_visibility라는 속성이 없을 것입니다.

그러나 렌더러에 전달 된 데이터 객체의 속성이어야합니다.

데이터 속성은 하나의 노동자를 가리켜 야한다 :

<worker id="1" field_label="Cash Owned" field_value="300" field_visibility="true"/> 

그리고 당신은 당신의 코드에 약간의 개조로 액세스 할 수 있어야합니다 : 최상의 결과를

 <mx:itemRenderer> 
      <fx:Component> 
       <mx:Button click="onClick(event)" label="Click Me" visible="{data.@field_visibility}"> 
        <fx:Script> 
        <![CDATA[ 
         import mx.controls.Alert; 

         private function onClick(evt:Event):void 
         { 
          Alert.show(data.field_visibility); 
         } 
        ]]> 
        </fx:Script> 
       </mx:Button> 
      </fx:Component> 
     </mx:itemRenderer> 

; 데이터 변경 이벤트를 청취하고 그러한 방식으로 가시성을 변경하는 것을 고려해야합니다. 이는 바인딩의 사용보다 더 적은 문제, 장기를 일으키는 것으로 알려져있다 :

원래 포스터 마지막 ​​코드 편집 그의 실제 질문을 전멸 어떤 이유로

 <mx:itemRenderer> 
      <fx:Component> 
       <mx:Button click="onClick(event)" label="Click Me" dataChange="onDataChange()" > 
        <fx:Script> 
        <![CDATA[ 
         import mx.controls.Alert; 

         private function onClick(evt:Event):void 
         { 
          Alert.show(data.field_visibility); 
         } 
         private function onDataChange(evt:Event):void 
         { 
          visible=data.@field_visibility"; 
         } 
        ]]> 
        </fx:Script> 
       </mx:Button> 
      </fx:Component> 
     </mx:itemRenderer> 

---

. Flex에서 XML 문자열 값을 부울 값으로 변환하는 데 문제가 있습니다. data.@field_visibility이 XMLList를 반환하는 것처럼 보입니다. 부울 값으로 항상 true입니다. 그것이 하나의 이슈입니다. 이 같은 조건을 수행하여 해결할 수 있습니다

if(data.@field_visibility == "true"){ 
this.button.visible = true; 
} else { 
this.button.visible = false; 
} 

두 번째 문제는 버튼이 최상위 요소 인 경우 사라져 나타나지 않는다는 것입니다. 따라서 컨테이너 안에 배치해야합니다. 나는 캔버스를 사용했다. @ www.Flextras.com의 대답에 또

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" pageTitle="Dynamic Data Grid"> 
    <!-- <s:layout> 
    <s:VerticalLayout horizontalAlign="center"/> 
    </s:layout>--> 

    <fx:Declarations> 
     <s:ArrayList id="cccb_dp"> 
      <fx:String>User1</fx:String> 
      <fx:String>User2</fx:String> 
      <fx:String>User3</fx:String> 
     </s:ArrayList> 

     <fx:XML id="tempXML" source="assets/fieldsXML.xml"/> 
     <s:XMLListCollection id="fieldsXMLList" source="{tempXML.worker}"/> 

    </fx:Declarations> 

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

    <s:VGroup verticalAlign="middle" horizontalCenter="1" verticalCenter="1" horizontalAlign="center"> 

     <s:Button click="{myDG.invalidateList()}" label="Invalidate List" /> 
     <s:HGroup horizontalAlign="center" verticalCenter="-221" width="580" height="158" x="75"> 
      <s:Label text="CC" width="23" height="24" verticalAlign="middle" fontWeight="bold"/> 
      <s:DropDownList id="cc_cb" dataProvider="{cccb_dp}" width="175"/> 
     </s:HGroup> 

     <mx:DataGrid id="myDG" dataProvider="{fieldsXMLList}"> 
      <mx:columns> 
       <mx:DataGridColumn headerText="Header1" dataField="@field_label"/> 
       <mx:DataGridColumn headerText="Header2" dataField="@field_value"/> 
       <mx:DataGridColumn headerText="Header3"> 
        <mx:itemRenderer> 
         <fx:Component> 
          <mx:Canvas dataChange="container1_dataChangeHandler(event)" > 
           <mx:Button label="Click Me" id="button" /> 
           <fx:Script> 
            <![CDATA[ 
             import mx.events.FlexEvent; 

             protected function container1_dataChangeHandler(event:FlexEvent):void 
             { 
              if(data.@field_visibility == "true"){ 
               this.button.visible = true; 
              } else { 
               this.button.visible = false; 
              } 
             } 

            ]]> 
           </fx:Script> 
          </mx:Canvas> 
         </fx:Component> 
        </mx:itemRenderer> 
       </mx:DataGridColumn> 
      </mx:columns> 
     </mx:DataGrid> 

    </s:VGroup> 

</s:Application> 

Answer 2

: 여기

는 응용 프로그램을 수정됩니다.

열의 dataField 속성을 사용하고 렌더러 데이터를 불가지론 자로 지정하려면 mx.controls.listClasses.IDropInListItemRenderer 인터페이스를 렌더러에 구현할 수 있습니다.

<mx:DataGrid dataProvider="{fieldsXMLList}" id="myDG"> 
    <mx:columns> 
     <mx:DataGridColumn dataField="@field_label" headerText="Header1" /> 
     <mx:DataGridColumn dataField="@field_value" headerText="Header2" /> 
     <mx:DataGridColumn dataField="@field_visibility" headerText="Header3"> 
      <mx:itemRenderer> 
       <fx:Component> 
        <mx:Button click="onClick(event)" label="Click Me" visible="{data[listData.dataField]}"> 
         <fx:Script> 
         <![CDATA[ 
          import mx.controls.Alert; 

          private function onClick(evt:Event):void 
          { 
           Alert.show(data[listData.dataField]); 
          } 
         ]]> 
         </fx:Script> 
        </mx:Button> 
       </fx:Component> 
      </mx:itemRenderer> 
     </mx:DataGridColumn> 
    </mx:columns> 
</mx:DataGrid>