Как показать подсказку в строке mx Datagrid в Flex? - PullRequest
Новая
       24

Как показать подсказку в строке mx Datagrid в Flex?

1 голос
/ 13 декабря 2011

Я хочу знать, как я показываю всплывающую подсказку для каждой строки сетки данных или показываю данные определенного столбца во всплывающей подсказке.

Ответы [ 2 ]

6 голосов
/ 13 декабря 2011

Если у вас есть DataGrid, и вы хотите отобразить данные, специфичные для строки, на mouseOver, вот как это можно сделать.

Первый шаг - включить свойство showDataTips для каждого DataGridColumn, для которого вы хотите включить это.функциональность включена.

Во-вторых, у вас должна быть функция dataTipFunction в самой DataGrid.Поскольку dataTipFunction передает данные строки Grid как объект в вызывающую функцию, вам не нужно передавать ей какие-либо аргументы.Вот небольшой пример, который показывает, как это сделать. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="doInit();">
<mx:Script>
    <!![CDATA[

        import mx.collections.ArrayCollection; // this holds the grid data

        [Bindable]
        private var myData:ArrayCollection = new ArrayCollection();

        private function doInit():void {
            myData.addItem({fname:"Joe",lname:"Bloggs"});
            myData.addItem({fname:"Joe1",lname:"Bloggs"});
        }

        private function buildToolTip(item:Object):String {
            var myString:String = "";
            if(item != null) {
                myString = myString + "Firstname : " + item.fname + "\n";
                myString = myString + "Lastname : " + item.lname + "\n";
            }

            return myString;
        }
    ]]>
</mx:Script>
<mx:DataGrid id="dGrid"  dataProvider="{myData}"  visible="true" dataTipFunction="buildToolTip">
    <mx:columns>
        <mx:DataGridColumn dataField="fname" headerText="FirstName" showDataTips="true" />
        <mx:DataGridColumn dataField="lname" headerText="LastName" showDataTips="true" />
    </mx:columns>
</mx:DataGrid>
</mx:Application>

Источник: http://www.anujgakhar.com/2008/01/13/flex-how-to-have-tooltip-on-every-row-of-datagrid/

Вот еще одно объяснение из другого источника:

Я использовал itemRollOverи события itemRollOut.в itemRollOver мы находим значение объекта в строке, получаем метку объекта и устанавливаем его как подсказку для сетки данных.itemRollOut ведет себя как уборщик ... 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                dataGrid.toolTip = str;
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Источник: http://www.flexdeveloper.eu/forums/mxml/tooltip-on-datagrid-row/

-Надеюсь, что помогает

4 голосов
/ 10 апреля 2013

Добавление к ответу Aarons: если вы хотите ТОЛЬКО показывать всплывающие подсказки, когда текст длиннее ширины столбца, вы можете использовать этот код (на примере примера пролонгации событий): 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="plain">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                if (event.itemRenderer.measuredWidth>event.itemRenderer.width) {
                    var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                    dataGrid.toolTip = str;
                }
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>
...