Spark DataGrid 问题

Question

Spark DataGrid 的奇怪问题：

1. 如果网格中的数据行数为偶数，则当网格中的数据发生变化时，一切都会正常呈现。
2. 如果行数为奇数，达到一定数量，则在数据更改时最中间的行将无法正确呈现。

在下面的代码中，我设置了一个问题示例，并使用了 MX/Halo DataGrid（有效）和 Spark DataGrid（无效）。请注意，两个网格中的第三列都有一个火花按钮的项目渲染器。 MX 网格使用与 spark 网格相同的操作脚本代码。当特定行的状态列显示为“已发布”时，应禁用两个网格每一行中的按钮。

MX 网格工作得很好，而无论出于何种原因，奇数行上的 spark 网格始终启用中间行的按钮，而在更改状态列时应该禁用它。如果 spark 网格中的行数是偶数，它就可以正常工作。

代码示例如下：

<?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"
               width="921" height="668" minWidth="955" minHeight="600"
               creationComplete="buildAnalytes(nsCount.value)">

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

            [Bindable]private var analytes:ArrayCollection;

            private function buildAnalytes(count:int):void {
                analytes = new ArrayCollection();

                for (var i:int = 0;i<count;i++) {
                    var analyte:Object = new Object();

                    analyte.analyte = "ANA" + (i+1);
                    analyte.result = i + 100;
                    analyte.status = "Pending";

                    analytes.addItem(analyte);
                }
            }

            private function release():void {
                var analyte:Object;

                for each (analyte in analytes) {
                    analyte.status = "Released";
                }

                analytes.refresh();
            }

        ]]>
    </fx:Script>

    <s:Panel id="panelResults" x="45" y="20" width="570" height="300" title="Results -- Halo (MX) DataGrid">
        <mx:DataGrid id="gridResultsMX" width="100%" editable="true" height="100%" dataProvider="{analytes}">
            <mx:columns>
                <mx:DataGridColumn width="100" dataField="analyte" headerText="Analyte" editable="false"/>
                <mx:DataGridColumn width="100" dataField="result" headerText="Result" editable="true"/>
                <mx:DataGridColumn width="100" dataField="comments" headerText="Comments" editable="false">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                                <s:Button width="90" height="15" label="Comments"
                                          enabled="{data.status != 'Released'}"
                                          />    
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>  
                </mx:DataGridColumn>

                <mx:DataGridColumn dataField="status" headerText="Status" editable="false"/>
            </mx:columns>
        </mx:DataGrid>
    </s:Panel>

    <s:Panel id="panelResults2" x="44" y="341" width="570" height="300" title="Results -- Spark DataGrid">
        <s:DataGrid id="gridResultsSpark" visible="true" x="0" y="0" width="100%"
                    height="100%" 
                    dataProvider="{analytes}" editable="true" fontSize="10">

            <s:columns>
                <s:ArrayList>
                    <s:GridColumn width="100" dataField="analyte" editable="false" headerText="Analyte"></s:GridColumn>
                    <s:GridColumn width="200" dataField="result" editable="true" headerText="Result"></s:GridColumn>

                    <s:GridColumn width="90" editable="false" headerText="Comments">
                        <s:itemRenderer>
                            <fx:Component>
                                <s:GridItemRenderer textAlign="center">
                                    <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                                        <s:Button width="70" height="15" label="Comments"
                                                  enabled="{data.status != 'Released'}"
                                                  />    
                                    </mx:HBox>
                                </s:GridItemRenderer>
                            </fx:Component>
                        </s:itemRenderer>                           
                    </s:GridColumn>

                    <s:GridColumn dataField="status" editable="false" headerText="Status"></s:GridColumn> 
                </s:ArrayList>
            </s:columns>
        </s:DataGrid>
    </s:Panel>

    <s:NumericStepper x="663" y="317" minimum="1" value="4" maximum="25" id="nsCount"/>
    <s:Button x="724" y="318" label="Build Analytes" click="buildAnalytes(nsCount.value)"/>

    <s:Button x="830" y="318" label="Release" click="release()"/>
</s:Application>

还有其他人遇到过这个吗？看到我的代码中有什么可以解释的吗？

任何帮助或想法将不胜感激。哦，这是 FlashBuilder 4.6，使用 4.6 SDK。

Answer 1

不要忘记在GridItemRenderer中覆盖设置数据函数。在这里，您可以根据 data 属性（状态）更改组件（按钮）的属性（启用）。这解决了您的问题。现在您的 GridColumn 如下所示：

<s:GridColumn width="90" editable="false" headerText="Comments">
    <s:itemRenderer>
        <fx:Component>
            <s:GridItemRenderer textAlign="center">
                <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                     <fx:Script><![CDATA[
                         override public function set data(value:Object):void{
                            if(value){
                              super.data = value;
                              myButton.enabled = data.status != 'Released';
                            }
                         }
                      ]]></fx:Script>
                      <s:Button id = "myButton" width="70" height="15" label="Comments"/>
                </mx:HBox>
            </s:GridItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:GridColumn>

你为什么要使用 而不是

？

Answer 2

为避免此问题，您可以像这样编辑release 函数：

...

private function release():void {

    var temp_analytes:ArrayCollection = new ArrayCollection();
    var obj:Object

    for each (var analyte:Object in analytes) {

        obj = {
            analyte : analyte.analyte,
            result : analyte.result,
            status : "Released" 
        }
        temp_analytes.addItem(obj);

    }

    analytes = temp_analytes;               
    analytes.refresh();

}

...

此代码 100% 为我工作（在 Flex 4.5 和 4.6 上测试）。

希望对你有帮助。