如何检查/勾选项目渲染器中的复选框?

我有一个包含货运对象的网格表(数据提供者接受船舶对象的数组集合),并在网格表中显示出货和日期的名称。 我的ship对象有一个名为checkList的属性,它是一个布尔值,用作我复选框项目渲染器中的数据绑定(要使复选框勾号和取消勾选)

当我将Image对象添加到容器中时,我想检查我的复选框。 正在添加到容器的Image对象具有一个ID。 我想将该Image ID与我的shipId在数据网格表中匹配,并选中该特定记录的复选框。

所以我的Image对象监听添加事件,所以当Image对象被添加到容器时。 它调用addHandler()函数获取图像的id和通过数据网格表的循环来查找匹配的id并检查CheckBox。 我的循环工作很好。使用Alert.show()我可以看到它匹配的id和布尔值设置为true,复选框被勾选。 但是,复选框未勾选。

这些是我的代码。 即使该特定记录的checkList属性设置为true。 该复选框未勾选。 我不知道问题是什么。 我是一名学生,刚接触flex.Can有人能帮助我吗?

我的MXML视图:我的网格表

<s:DataGrid id="arrivalTable" x="-1" y="-1" width="302" height="205" requestedRowCount="4" 
                dataProvider="{myArrivalShips}" >               
        <s:columns>
            <s:ArrayList>                   
                <s:GridColumn dataField="shipName" headerText="Arrival Ships" itemRenderer="DesignItemRenderer.myCustomToolTipRenderer" width="130" ></s:GridColumn>
                <s:GridColumn dataField="ETA" headerText="ETD" itemRenderer="DesignItemRenderer.myCheckBoxRenderer"></s:GridColumn>                                                         
            </s:ArrayList>                  
        </s:columns>                
    </s:DataGrid>

我的图像对象侦听添加事件。

displayImg.addEventListener(FlexEvent.ADD,addHandler);

这是我的addHandler()事件功能:

protected function addHandler(event:FlexEvent):void
{
    var ImageShipId:String = Image(event.currentTarget).id;             
    var destination:BorderContainer = Image(event.currentTarget).owner as BorderContainer;
    var destinationId:String = destination.id;          

    if( destinationId == "bct_HoldingArea" ){

        for(var j:int = 0; j<arrivalTable.dataProvider.length; j++){

            var myShip:Ship = arrivalTable.dataProvider.getItemAt(j) as Ship;
            var myShipId:String = myShip.shipID.toString();

            if(StringUtil.trim(myShipId) == StringUtil.trim(ImageShipId)){                          
                myShip.checkList = true;
                Alert.show("The ship name : " + myShip.shipName +"n" + "The Ship selected : " + myShip.checkList);
            }
        }           
    }               
}

我的复选框项目渲染器:

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">    
<s:HGroup>
    <s:Label text="{data.ETD}"  paddingTop="8"/>        
    <s:CheckBox id="myCheckBox" enabled="false" selected="{data.checkList}"  />
</s:HGroup> 


更新对象后应使用数据提供者的“刷新”方法:

(arrivalTable.dataProvider as ArrayCollection).refresh();

所以你的函数看起来像这样:

protected function addHandler(event:FlexEvent):void
{
var ImageShipId:String = Image(event.currentTarget).id;             
var destination:BorderContainer = Image(event.currentTarget).owner as BorderContainer;
var destinationId:String = destination.id;          

if( destinationId == "bct_HoldingArea" ){

    for(var j:int = 0; j<arrivalTable.dataProvider.length; j++){

        var myShip:Ship = arrivalTable.dataProvider.getItemAt(j) as Ship;
        var myShipId:String = myShip.shipID.toString();

        if(StringUtil.trim(myShipId) == StringUtil.trim(ImageShipId)){                          
            myShip.checkList = true;

            (arrivalTable.dataProvider as ArrayCollection).refresh();

            Alert.show("The ship name : " + myShip.shipName +"n" + "The Ship selected : " + myShip.checkList);
        }
    }           
}               
}

//编辑中间行的问题似乎是所谓的“中间行错误”。 我在这里找到了一些信息。

为了避免这种奇怪的事情,试着用这种方法来改变你的Renderer代码:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">   
<fx:Script>
    <![CDATA[
        import mx.utils.ObjectUtil;

        [Bindable]override public function get data():Object
        {
            return ObjectUtil.copy(super.data);;
        }

        override public function set data(value:Object):void
        {
            super.data = value;
        }

    ]]>
</fx:Script>

<s:HGroup>
    <s:Label text="{data.ETD}"  paddingTop="8"/>
    <s:CheckBox id="myCheckBox" enabled="false" selected="{data.checkList}"/>
</s:HGroup> 
</s:GridItemRenderer>

//编辑

这个技巧的简短解释:我发现数据更新发生在除中间行以外的每一行。 我试图遵循数据网格的源代码。 我认为负责此操作的代码行是:

renderer.data = dataItem;

在GridLayout.as类中。

此行会为除中间行以外的每行更新数据。 为什么? Flex对这个表达式的两边进行比较,如果它们相等则不做任何事情。 在我们的情况下,它们不是平等的,但它似乎是一个真正的错误。 无论如何...我们需要等到Flex团队解决问题。

作为临时解决方法,我通过在“get”函数中克隆Object来残酷地改变表达式的左侧。 所以现在比较应该返回FALSE,并且应该为每一行更新数据属性。

设置的功能可以被删除,但它是调试相同问题的好地方。

这不是一个好方法,但总比没有好。

链接地址: http://www.djcxy.com/p/34647.html

上一篇: How to check/tick a CheckBox in the item renderer?

下一篇: Flex item renderer