DataGrid ItemRenderer錯誤

我使用一個簡單的XML文件填充我的datagrid的3列。最後一列應該是一個itemrenderer，基本上是一個Button。但是，該按鈕應該僅顯示在數據網格的第3列的某些行上，具體取決於來自XML文件的值，該值爲「true」或「false」。所以基本上我想將itemrenderer中按鈕的Visible屬性設置爲true或false。DataGrid ItemRenderer錯誤

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([email protected]_visibility); 
              } 
              private function onDataChange(evt:Event):void 
              { 
               [email protected]_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.

來源

2011-08-25 FlexyBoz

每個itemRenderer獲取一個數據對象;其中包含渲染器正在顯示的元素。在渲染器中不會有一個名爲field_visibility的屬性，因爲它不是默認屬性，而且您也沒有創建屬性。

但是，它應該是傳遞到渲染器的數據對象的屬性。

數據屬性應指向一個工人：

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

而且你應該能夠輕微MODS的代碼訪問它：

 <mx:itemRenderer> 
      <fx:Component> 
       <mx:Button click="onClick(event)" label="Click Me" visible="{[email protected]_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 
         { 
          [email protected]_visibility"; 
         } 
        ]]> 
        </fx:Script> 
       </mx:Button> 
      </fx:Component> 
     </mx:itemRenderer>

出於某種原因，原來的海報最後的代碼編輯消滅了他的實際問題。 Flex在將XML字符串值轉換爲布爾值時遇到了問題。 [email protected]_visibility似乎正在返回一個XMLList。作爲一個總是爲真的布爾值。這是問題一。它可以通過做這樣的條件來解決：

if([email protected]_visibility == "true"){ 
this.button.visible = true; 
} else { 
this.button.visible = false; 
}

第二個問題是，如果按鈕不是頂層組件，它就不會消失。所以，你需要把它放在一個容器內。我用了一個Canvas。

下面是修改後的應用：

<?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([email protected]_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>

來源

2011-08-25 13:00:08 JeffryHouser

綁定將失敗並顯示XMLList。如果您不使用'dataChange'方法，所有按鈕都將可見。 – RIAstar

使用數據。@ field_visibility刪除錯誤，但仍然無效。我和你的第二個建議完全一樣。無論field_visibility爲'true'還是'false'，該列的每一行都顯示該按鈕任何想法？ – FlexyBoz

@RIAStar感謝您的澄清;我沒有太多處理XML。 – JeffryHouser

除了@ www.Flextras.com的答案。

如果您想要依靠專欄的dataField屬性並使渲染器數據不可知，您可以在渲染器中實現mx.controls.listClasses.IDropInListItemRenderer接口。就您從MX Button繼承而來，已經實現它的代碼如下：

<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>

來源

2011-08-25 13:10:49 Constantiner

MX Button已經實現了IDropInListItemRenderer http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/Button.html – JeffryHouser

@ www.Flextras.com感謝您指出這一點。我把這個代碼片段寫成了網頁形式，所以忘了它:) – Constantiner

@ www.Flextras.com我已經用你的建議修改了答案。 – Constantiner

DataGrid ItemRenderer錯誤

回答

相關問題