Question

Spark DataGrid的奇怪问题：

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

在下面的代码中，我设置了一个问题的示例，并使用MX / Halo DataGrid（可以工作）和Spark DataGrid（不起作用）。请注意，两个网格中的第三列都有一个spark按钮的项呈示器。 MX网格使用与火花网格相同的动作脚本代码。当该特定行的状态列显示为＆＃34;已发布＆＃34;时，应禁用两个网格的每一行中的按钮。

MX网格工作正常，无论出于何种原因，奇数行上的火花网格始终启用中间行按钮，而在更改状态列时应禁用它。如果火花网格中的行数相等，则可以正常工作。

以下是代码示例：

<?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

要避免此问题，您可以像这样编辑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上测试）。

我希望能帮助你。

Answer 2

请勿忘记在 GridItemRenderer 中覆盖设置数据功能。在这里，您可以根据数据属性（状态）更改组件（按钮）的属性（已启用）。这可以解决您的问题。现在您的 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>

为什么你使用＆lt; mx：HBox＆gt; 而不是使用＆lt; s：HGroup＆gt; ？

Spark DataGrid问题

2 个答案: