如何检查/勾选项呈示器中的CheckBox?

时间:2013-02-27 03:40:15

标签: flex datagrid itemrenderer

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

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

因此我的Image对象会侦听add事件,因此将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>

我的Image对象侦听添加事件。

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> 

1 个答案:

答案 0 :(得分:0)

更新对象后,您应该使用dataprovider的“refresh”方法:

(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);
        }
    }           
}               
}

<强> //修改 中间行的问题似乎是所谓的“中间行错误”。我找到了一些信息here

要避免这种奇怪的事情,请尝试以这种方式更改渲染器代码:

<?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,并且应该为每一行更新data属性。

可以删除set函数,但它是调试相同问题的好地方。

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