flex - La cuadrícula de datos de Spark con la casilla de verificación no se actualiza correctamente

checkbox datagrid

Question

Las casillas de verificación se actualizan correctamente cuando selecciono una o más filas de cuadrícula de datos, pero cuando selecciono una casilla de verificación por primera vez, la casilla de verificación no se actualiza hasta que el puntero sale de la fila de cuadrícula de datos. ¿Cómo puedo arreglar esto?

<?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">
    <s:DataGrid id="dg" x="344" y="48" selectionMode="multipleRows" requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        import mx.controls.Alert;
                                        import spark.components.DataGrid;

                                        override public function prepare(hasBeenRecycled:Boolean):void
                                        {
                                            cb.selected = grid.selectionContainsIndex(rowIndex);
                                        }
                                    ]]>
                                </fx:Script>
                                <s:CheckBox id="cb" label="" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
                <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
                <s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
            </s:ArrayList>
        </s:columns>
        <s:typicalItem>
            <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
        </s:typicalItem>
        <s:ArrayList>
            <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
            <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
            <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
            <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
        </s:ArrayList>
    </s:DataGrid>
</s:Application>

Answer 1

Cambia esto:

 <s:CheckBox id="cb" label="" horizontalCenter="0"/> 

A:

<s:CheckBox id="cb" label="" horizontalCenter="0" enabled="false"/>

Solo te recomiendo usar la propiedad habilitada.

Creo que el "evento de clic" enviado desde checkbox y gridColumn , luego la función devuelta se impedía mutuamente.

Si la propiedad habilitada se establece como falsa, su evento click se distribuye solo en gridColumn luego usando cb.selected=grid.selectionContainsIndex(rowIndex); ocupe correctamente si desea mostrar la casilla de verificación activada, puede usar CSS o skinclass

Answer 2

La manera más fácil es simplemente usar el estado seleccionado de renders como lo sugiere RIAStar. Sin embargo, si está utilizando el desollamiento global y el dibujo personalizado no funciona, use un contenedor que se pueda personalizar o, como acabo de poner, la casilla de verificación, pero no responda a los comandos del mouse. Para la selección múltiple, siempre que su cuadrícula esté configurada en varias filas o columnas, simplemente puede capturar los eventos del mouse y forzar la tecla ctrl que les hace manejar la selección múltiple.

<s:GridItemRenderer 
    mouseDown="mouseDownHandler(event)"
    mouseUp="mouseUpHandler(event)"
    buttonMode="true"
    mouseChildren="false"
    useHandCursor="true"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    >

    <s:states>
        <s:State name="normal"/>
        <s:State name="selected"/>
    </s:states>

    <fx:Script>
        <![CDATA[
            protected function mouseUpHandler(event:MouseEvent):void {
                event.ctrlKey = true;
            }

            protected function mouseDownHandler(event:MouseEvent):void {
                event.ctrlKey = true;
            }
        ]]>
    </fx:Script>

    <s:CheckBox 
        id="check"
        selected.normal="false"
        selected.selected="true"
        horizontalCenter="0"
        verticalCenter="0"
        />

</s:GridItemRenderer>

Answer 3

Puede falsificar el CheckBox dibujando una forma de CheckBox en el ItemRenderer y usar los estados para mostrar el tic.

<s:GridItemRenderer>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <!-- checkbox graphics -->
    <s:Group width="16" height="16" horizontalCenter="0" verticalCenter="0">
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="0xffffff" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0xa9aeb2" />
            </s:stroke>
        </s:Rect>

        <!-- tick, only shown when selected -->
        <s:Rect includeIn="selected" width="8" height="8" horizontalCenter="0" verticalCenter="0">
            <s:fill>
                <s:SolidColor color="0x90b40c" />
            </s:fill>
        </s:Rect>
    </s:Group>
</s:GridItemRenderer>

Este es un gráfico simplificado para una casilla de verificación, pero puede ir a tomar el código de la chispa CheckBoxSkin y copiarlo / pegarlo en el itemrenderer lo itemrenderer . Puede que tenga que cambiar algunos nombres de estado.

Sin embargo, esto no deseleccionará una sola fila cuando CheckBox el CheckBox de una fila ya seleccionada, a menos que mantengas presionada la tecla CTRL . Ese es el comportamiento predeterminado del componente DataGrid . Me temo que tendrá que crear su propia subclase de DataGri d si desea evitar ese comportamiento.

Otra cosa importante que debe saber: establecer la propiedad selected en el itemrenderers que itemrenderers no cambia los selectIndices de DataGrid . Por lo tanto, en el siguiente ciclo de commitProperties() , el valor que establezca en el renderizador quedará anulado por DataGrid .

Respuesta anterior: (antes de editar)

La clase ItemRenderer (y por lo tanto también la clase GridItemRenderer ) tiene una propiedad selected . Por lo tanto, podría vincular las casillas de verificación de la propiedad selected a los itemrenders , de esta forma:

<s:CheckBox selected="{selected}" horizontalCenter="0" />

Tendría que crear una clase ItemRenderer separada para que funcione, en lugar de una en línea. Si realmente desea ir en línea, siempre puede anular el establecimiento selected .

<s:GridItemRenderer>
  <fx:Script>
  <![CDATA[
      override public function set selected(value:Boolean):void {
          super.selected = cb.selected = value;
      }
  ]]>
  </fx:Script>
  <s:CheckBox id="cb" horizontalCenter="0"/>
</s:GridItemRenderer>

Answer 4

Terminé simplemente haciendo esto:

            <s:GridColumn dataField="myBoolean" headerText="Returned" width="55">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                                <s:CheckBox id="cb1" selected="{data.myBoolean}" change="{data.myBoolean=cb1.selected}"/>                                                           
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>