[CLOSED] Tooltip not working within ViewPort

Hi folks, I am trying to implement a GridPanel Cell Tooltip inside a Viewport, as shown in the following example: https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

I noticed that there is an issue when the GridPanel is inside a Viewport: http://forums.ext.net/showthread.php...-with-Viewport. I implemented it as show in the previous example but i was not able to achieve the same results.

Any ideas to overcome this issue?

1 - JavaScript

Code:

---

<script type="text/javascript">
    var showToolTip = function (toolTip, grid) {
        alert("hier");
        var cellIndex = grid.view.findCellIndex(toolTip.triggerElement);
        var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
        var rowIndex = grid.view.findRowIndex(toolTip.triggerElement);
        var record = StoreEventList.getAt(rowIndex);
        data = record.get(column.dataIndex);
        toolTip.update(data);
    };
</script>

---

2 - View

Code:

---

<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
    <Items>
        <ext:GridPanel ID="GridPanel1" runat="server" Region="Center" Title="Plants" Frame="false">
            <Store>
                <ext:Store runat="server" ID="Store2">
                    <Proxy>
                        <ext:AjaxProxy Url="/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader Root="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model ID="Model2" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Sorters>
                        <ext:DataSorter Property="Common" Direction="ASC" />
                    </Sorters>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" />
                    <ext:Column ID="Column3" runat="server" Text="Name" DataIndex="Name" />
                    <ext:Column ID="Column2" runat="server" Text="Address" DataIndex="Address" />
                </Columns>
            </ColumnModel>
            <Bin>
                <ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
                    MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="10"
                    Anchor="bottom" NoCache="true" Closable="true" Icon="PageWhite">
                    <Listeners>
                        <Show Handler="showToolTip(#{RowTip}, #{GridPanel1});" />
                    </Listeners>
                </ext:ToolTip>
            </Bin>
        </ext:GridPanel>
    </Items>
</ext:Viewport>

---

3 - Controller

Code:

---

public StoreResult LoadFakeRecords()
{

    List<Person> lst = new List<Person>();

    for (int index = 0; index < 20; index++)
    {
        lst.Add(new Person
        {
            ID = index,
            Name = "Name" + index,
            Address = "Address" + index,
        });
    }

    return new StoreResult(lst, lst.Count());
}

---

4 - Utility

Code:

---

public class Person
{
    public int ID { get; set; }

    public string Name { get; set; }

    public string Address { get; set; }
}

---

Hi Raphael,

Does it not throw a JavaScript error here?

Code:

---

var record = StoreEventList.getAt(rowIndex);

---

I just can't see the StoreEventList definition in your sample.

Quote:

---

i was not able to achieve the same results

---

Unfortunately, it is no so informative. Please always try to provide more details. For example, "There is no any error, but the ToolTip doesn't appear. The showToolTip is not triggered at all."