Flex (DataGrid), как изменить видимое состояние определенной ячейки при наведении курсора на строку

Question

У меня есть три столбца, и состояние видимого по умолчанию последнего столбца равно false. Моя проблема заключается в том, как изменить состояние видимой области определенной ячейки при наведении указателя мыши на любую часть строки.

Английский не является моим родным языком, поэтому, если я недостаточно четко сформулировал свой вопрос, пожалуйста, продолжайте читать.

------------------------------------------------
|  column1  | column2   | column3 (invisible)  | row1
|  column1  | column2   | column3 (invisible)  | row2
------------------------------------------------

как я могу показать ячейку (row1, column3), когда наведен курсор на любой столбец row1.

Answer 1

Вы можете легко переключать видимость всего столбца при наведении на элементы в столбце 1 таким образом:

<mx:DataGrid dataProvider="{[{c1:'a1', c2:'b1', c3:'c1'}]}">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="c1">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{listData.label}"
                        rollOver="DataGrid(owner).columns[2].visible = true"
                        rollOut="DataGrid(owner).columns[2].visible = false"
                    >
                        <mx:Script>
                            <![CDATA[
                                import mx.controls.DataGrid;
                            ]]>
                        </mx:Script>
                    </mx:Label>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Column 2" dataField="c2" />
        <mx:DataGridColumn headerText="Column 3" dataField="c3" visible="false" />
</mx:DataGrid>

Конечно, вам лучше создать новый класс вместо встроенного средства визуализации элементов.

Отображение единственного средства визуализации в 3-м столбце очень сложно, потому что, если весь столбец невидим, то для этого столбца не создается средств визуализации.

Я думаю, что лучше использовать всплывающие подсказки, например:

<mx:Script>
<![CDATA[
     import test.CellRenderer;
]]>
</mx:Script>
<mx:UIComponent id="textFlowContainer" width="100%" height="100%" />
<mx:DataGrid dataProvider="{[{c1:'a1', c2:'b1', c3:'c1'}]}">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="c1" itemRenderer="{new ClassFactory(CellRenderer)}" />
        <mx:DataGridColumn headerText="Column 2" dataField="c2" itemRenderer="{new ClassFactory(CellRenderer)}" />
    </mx:columns>
</mx:DataGrid>

Где test.CellRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" text="{listData.label}"
         rollOver="rollOverHandler()" rollOut="rollOutHandler(event)">
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManagerChildList;
        import mx.managers.PopUpManager;
        import mx.controls.Label;
        import mx.controls.DataGrid;

        private var popupLabel:Label;

        private function rollOverHandler ():void
        {
            popupLabel = new Label();
            popupLabel.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
            popupLabel.text = data.c3;
            PopUpManager.addPopUp(popupLabel, this, false, PopUpManagerChildList.PARENT);
            var p1:Point = new Point(0, this.y);
            p1 = localToGlobal(p1);
            var p2:Point = new Point(listData.owner.x+listData.owner.width, 0);
            p2 = listData.owner.parent.localToGlobal(p2);
            popupLabel.move(p2.x, p1.y);
        }

        private function rollOutHandler (event:MouseEvent):void
        {
            if (popupLabel && !popupLabel.hitTestPoint(event.stageX, event.stageY))
            {
                PopUpManager.removePopUp(popupLabel);
                popupLabel = null;
            }
        }
    ]]>
</mx:Script>
</mx:Label>