在 Flex DataGrid 中显示复选框列

Question

我正在尝试创建一个自定义 Flex DataGrid，它由两列组成，一列用于标签，另一列用于复选框。 该复选框包含在一个名为 CustomRenderer 的类中，该类继承自 GridItemRenderer 并实现了 IFactory。

在 CustomRenderer 的每个实例中，我都有一个名为 number 的变量，以便在单击复选框时，它可以将数字传回，以便我知道单击了哪一行。

问题是我的 CustomRenderer 在程序运行时没有显示。

请有人帮忙。

这是我的代码。

MyProgram.mxml

<?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"
               initialize="initData()">

    <fx:Script> 
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.CheckBox;
            import mx.rpc.events.AbstractEvent;

            private var ArrayItems:Array = [
                {Label:'Table'},
                {Label:'Chair'},
                {Label:'Stool'},
                {Label:'Bench'},
                {Label:'Sofa'}];

            [Bindable]
            private var ArrayCollectionItems:ArrayCollection;

            private var t:CustomRenderer;

            public function initData():void
            {
                ArrayCollectionItems=new ArrayCollection(ArrayItems);

                t = new CustomRenderer();
                t.cb.addEventListener(MouseEvent.CLICK, HandleClick);
                MainGrid.columns[1].itemRenderer = t.newInstance();     
            }

            public function HandleClick(event:Event):void
            {
                var c:CustomRenderer = (event.currentTarget) as CustomRenderer
                var RowClicked:int = c.number;
            }       

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="State1"/>
    </s:states>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel x="99" y="14" width="379" height="268" skinClass="spark.skins.spark.PanelSkin">
        <s:DataGrid id="MainGrid" x="19" y="17" width="340" height="199"
                    dataProvider="{ArrayCollectionItems}" requestedRowCount="4" requireSelection="false"
                    resizableColumns="false" selectionMode="singleRow" showDataTips="false">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn minWidth="200" dataField="Label" headerText="Label"></s:GridColumn>
                    <s:GridColumn minWidth="30" dataField="" headerText="">                 
                    </s:GridColumn>
                </s:ArrayList>
            </s:columns>
            <s:typicalItem>
                <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
            </s:typicalItem>
        </s:DataGrid>
    </s:Panel>
</s:Application>

CustomRenderer.as

import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.core.IFactory;

import spark.components.gridClasses.GridItemRenderer;

public class CustomRenderer extends GridItemRenderer implements IFactory
{   
    private static var count:int = 0;
    public var number:int;
    public var cb:CheckBox;

    public function CustomRenderer()
    {       
        cb = new CheckBox();
        number = count++;
        cb.x = 22;
        cb.y = 4;           
        addElement(cb);
    }

    public function newInstance():*
    {
        return new CustomRenderer();
    }
}

Answer 1

这可能是因为您将 itemrenderer 的实例传递给列 (new CustomRenderer()) 而不是类 (CustomRenderer)。常见的方法是将 itemrenderer 类传递给您的列，然后处理其中的点击/选择：

<s:GridColumn minWidth="30" headerText="" itemRenderer="com.yourpackage.CustomRenderer"> 

在您分配它时开始输入“Customrenderer”，您应该能够自动完成，以便它写出您的完整包路径。

然后，您可以在渲染器中捕获复选框选择事件，并可以设置一些自定义数据属性（例如，data.selected）。如果您确实需要在选择后在 Grid 之外执行某些操作，您可能需要在选择时从渲染器触发自定义事件并在数据网格上监听它。