datagrid一列中的多個組件

Question

嗨，我想問一問，是否有可能在另一列中同時包含字符串和單選按鈕，這取決於另一列的值

|column1 | column 2   | 
|r       | radiobutton|
|s       | string     |

如果第2列的第1列中有r，則應顯示一個單選按鈕，否則第2列僅顯示一個字符串。

謝謝你的回答

塞巴斯蒂安

Answer 1

您需要編寫自己的itemRenderer。

從高層次來看，您需要做的是告訴列您將按行呈現列。 然后，每行-檢查所需的條件（例如查看其他列或其他內容），並執行所需的操作（例如添加單選按鈕或其他組件）。

在數據列中執行以下操作：

<mx:DataGridColumn id="yourColumn" 
headerText="Cool Column" editable="false" itemRenderer="SpecialCanvas"/>

然后，在名為“ SpecialCanvas”的組件（假設他擴展了畫布）中，您可以根據需要事件或重寫方法進行渲染...例如：

override protected function initializationComplete():void
{
  // check for the conditional that you want and add the component that
  // you need to this canvas or what not.
}

Answer 2

您確實需要編寫一個項目渲染器來執行此操作。 但是，無論何時設置“數據”屬性，您都希望更新渲染的狀態。 這很重要，因為項目渲染器已回收。 基本上，只要該渲染器的數據發生更改，就將設置data屬性，並且在滾動DataGrid時會發生這種情況。

這是一個帶有DataGrid的簡單應用程序：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable] private var collection:ArrayCollection;

        private function onCreationComplete():void
        {
            collection = new ArrayCollection();
            for (var i:uint = 0; i < 20; i++)
                collection.addItem({name:'Person #'+i});
        }

    ]]>
</mx:Script>

<mx:DataGrid width="600" dataProvider="{collection}" rowCount="5">
    <mx:columns>
        <mx:DataGridColumn itemRenderer="com.foo.ItemRenderer"/>
    </mx:columns>
</mx:DataGrid>

</mx:Application>

還有一個簡單的基於MXML的渲染器：

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
    <![CDATA[

        override public function set data(value:Object):void
        {
            super.data = value;
            // only show radio buttons if the "name" property of the data contains "5"; otherwise show a label
            radioS.visible = radioS.includeInLayout = radioM.visible = radioM.includeInLayout = radioL.visible = radioL.includeInLayout = data.name.indexOf(5) > -1;
            labelName.visible = labelName.includeInLayout = data.name.indexOf(5) < 0;               
        }

    ]]>
</mx:Script>

<mx:Label id="labelName" text="{data.name}"/>
<mx:RadioButton id="radioS" label="Small" groupName="radioGroup"/>
<mx:RadioButton id="radioM" label="Medium" groupName="radioGroup"/>
<mx:RadioButton id="radioL" label="Large" groupName="radioGroup"/>

</mx:HBox>